image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"style="border:1px solid #000000;"></canvas>
</body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
for(let d = 0;d < 8; d += 1) {
let outStep = 50*d
for(let a = 0;a < 8; a += 1){
let step = 50*a
for(let b = step,c = outStep;b <= step+12, c <= outStep+12; b += 3, c += 3) {
draw(b,c, step);
}
}
}
//十六进制随机颜色
function color16(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
return color;
}
// 画方框
function draw(x, y, z) {
ctx.fillStyle=color16();
let width = 0
width = 50-(x-z)*2
ctx.strokeStyle="#000000";
ctx.lineWidth=1;
// ctx.fillRect(x,y,width,width);
ctx.rect(x,y,width,width);
ctx.fill();
ctx.stroke();
}
</script>
</html>
填充颜色的矩形
image.png
ctx.fillRect(x,y,width,width);
// ctx.rect(x,y,width,width);
// ctx.fill();
