html两个长方形颜色,javascript – 如何使用HTML5 Canvas获取多个颜色矩形？

我正在尝试绘制不同颜色的6X6正方形.但新颜色压倒了旧颜色.我想为每个广场添加eventhandler.

Your browser does not support the HTML5 canvas tag.

JavaScript的：

var xPoint = 30;

var yPoint = 30;

var c = document.getElementsByTagName('canvas')[0];

var ctx = c.getContext("2d");

for(var i =1; i<=6;i++)

{

var tyPoint = yPoint * i;

for(var j=1;j<=6;j++)

{

var txPoint = xPoint * j;

var colorcode = CalculateHEX();

ctx.beginPath();

ctx.fillStyle = colorcode ;

ctx.rect(20, 20, txPoint , tyPoint );

ctx.fill();

ctx.stroke();

ctx.closePath();

}

}

function CalculateHEX()

{

alert('HEX');

var rgbCode ="#";

for(var c = 0;c< 3;c++)

{

var y = Math.floor((Math.random() * 255) + 1);

rgbCode = rgbCode + Number(y).toString(16);

}

return rgbCode;

}

解决方法:

您混淆了rect方法中参数的顺序.它应该是：

ctx.rect(txPoint, tyPoint, 20, 20);

前两个参数是矩形左上角的x和y坐标,其余是矩形宽度和高度.

标签：javascript,css,html5,canvas,html

来源： https://codeday.me/bug/20190702/1361327.html