Canvas学习笔记之一:画矩形

最新推荐文章于 2024-08-20 03:01:37 发布

九段刀客

最新推荐文章于 2024-08-20 03:01:37 发布

阅读量353

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/weixin_35958891/article/details/104077730

版权

效果

在这里插入图片描述
画一个填充矩形

ctx.fillRect(x,y,width,height)

画一个描边矩形

ctx.strokeRect(x,y,width,height)

清除指定矩形区域

ctx.clearRect(x,y,width,height)

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #test {
      box-shadow: 0 0 10px #333;
    }
  </style>
</head>
<body>
  <canvas id="test" width="500" height="400"></canvas>
  <script>
    //画布
    let canvas = document.getElementById('test');
    // 画笔
    let ctx = canvas.getContext('2d');

    //1、 画一个红色的填充矩形 fillRect(x,y,width,height)
    ctx.fillStyle = 'red'
    ctx.fillRect(0,0,350,300);

    //2、 画一个半透明填充矩形
    ctx.fillStyle = 'rgba(0,0,200,0.5)';
    ctx.fillRect(30,30,350,300);

    //3、 画一个蓝色的描边矩形（相当于border) storkeRect(x,y,width,height)
    ctx.strokeStyle = 'blue'
    ctx.strokeRect(50,50,350,300)

    //4、 清除指定矩形区域 clearRect(x,y,width,height)
    ctx.clearRect(10,80,100,100)
  </script>
</body>
</html>