canvas画回形图

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();

最后编辑于：2020.12.17 10:30:35

canvas画回形图

推荐阅读更多精彩内容