javascript - Javascript颜色矩形数组
问题描述
我正在尝试使用一对 for 循环生成一个 4 x 4 数组,该数组由 16 个小矩形组成,每个小矩形具有不同的颜色。然而,颜色并没有改变。
var x;
var y;
var color;
for (x=0; x < 4; x++){
for (y=0; y < 4; y++){
color = 255 - x*20 - y*20;
ctx.fillStyle = 'rgba(0, 0, color, 1.0)';
ctx.fillRect((x*10), (y*10), 10, 10);
}
}
解决方案
您将其设置为字符串颜色,而不是变量。您需要修复构建字符串的方式。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var x;
var y;
var color;
for (x = 0; x < 4; x++) {
for (y = 0; y < 4; y++) {
color = 255 - x * 20 - y * 20;
ctx.fillStyle = 'rgba(0, 0, ' + color + ', 1.0)';
ctx.fillRect((x*10), (y*10), 10, 10);
}
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
推荐阅读
- ruby-on-rails - 在 Vue.js 中使用 ActiveStorage 上传文件
- reactjs - 如何将 material-ui 表导出为 CSV?
- git - 如何拆分 git repo 并应用 Maven 子模块和 Maven 父级?
- javascript - 如何在不重新加载页面的情况下更改 BrowserWindow 哈希 url
- javascript - clearInterval 不会停止间隔
- c++ - 使用 Detected Idiom 实现 is_destructible
- r - 无法为签名“逻辑”找到函数“rowData”的继承方法
- c# - 为什么我的 Windows 窗体按钮上缺少 Aero 视觉样式动画?
- php - 如何将 do-while 循环转换为 for 循环
- python - ImportError:无法导入名称“convert_kernel”