HTML5画布 - 为什么矩形的颜色总是返回黑色？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想画一个画布矩形，每个负载都会改变颜色。这里是我的代码：HTML5画布 - 为什么矩形的颜色总是返回黑色？

window.onload = function() { 
    var can = document.getElementById("lol"); 
    var ctx = can.getContext("2d"); 
    var colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)"]; 
    ctx.fillStyle = colors[Math.random() * 3]; 
    ctx.fillRect(40,40,30,25); 
}

然而，每当我打开一个网页，颜色应改为红色，蓝色或绿色，但颜色是黑色的持续。

为什么会发生这种情况？我的代码有什么问题？

回答：

您没有正确选取随机数。你的随机函数几乎不会返回一个整数。

Read more about Math.random here.

这里是你想要做什么：

var can = document.getElementById("lol");  
var ctx = can.getContext("2d");  
var colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)"];  
ctx.fillStyle = colors[Math.floor(Math.random() * 3)];  
ctx.fillRect(40,40,30,25);

<canvas id="lol"></canvas>

回答：

你需要一个整数值，用于访问数组元素。

ctx.fillStyle = colors[Math.floor(Math.random() * 3)];

我建议使用数组作为随机数因子的长度（一个恒定vaue可能出错，如果单元的计数改变后）。

ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];

回答：

试试这个：ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)]; https://jsfiddle.net/xpavwkod/

以上是 HTML5画布 - 为什么矩形的颜色总是返回黑色？ 的全部内容， 来源链接： utcz.com/qa/257661.html

回到顶部