canvas-矩形

最新推荐文章于 2023-02-01 18:59:15 发布

十里夜

最新推荐文章于 2023-02-01 18:59:15 发布

阅读量301

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/hgyu_962464/article/details/54893049

版权

canvas 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas-矩形</title>
    <style>
        #canvas{
            border: 1px solid palevioletred;
        }
    </style>
    <script>
      window.onload = function (){
          //获取到canvas元素
          var canvas = document.getElementById('canvas');
          //获取canvas中的画图环境
          var context = canvas.getContext('2d');
          //开启新的一条路径
          context.beginPath();
          //第一种 ：绘制矩形路径的方式
          //绘制矩形
          context.rect(100,100,200,100);
          //描边
          context.stroke();
          //填充
          context.fill();

          //第二种 ：直接绘制矩形边框
          context.strokeRect(100,210,200,100);

          //第三种 ：直接绘制填充矩形
          context.fillRect(100,320,200,100);

          //矩形擦除
          context.clearRect(200,100,20,420);
          //擦除整个画布
          //context.clearRect(0,0,canvas.width,canvas.height);


      }
    </script>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px">
    </canvas>
</body>
</html>