Canvas 元素绘制矩形

最新推荐文章于 2024-03-27 21:00:16 发布

__Zoe__

最新推荐文章于 2024-03-27 21:00:16 发布

阅读量111

点赞数

分类专栏： HTML+CSS 文章标签： canvas

本文链接：https://blog.csdn.net/qq_24917475/article/details/101197731

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用 canvas 元素，必须先设置 width 和 height 属性，指定可以绘图的区域大小。
要在这块画布上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用 getContext() 方法并传入上下文的名字。传入“2d”，就可以取得2D上下文对象。
与矩形相关的方法包括：fillRect()、strokeRect()、clearRect()。这三个方法都能接收 4 个参数：矩形的x坐标，矩形的y坐标，矩形宽度和矩形高度。这些参数的单位都是像素。

<html>
<body>
  <canvas id="drawing" width="500" height="500">A drawing of something</canvas>

  <script>
    var drawing = document.getElementById("drawing");

    // 确认浏览器支持<canvas>元素
    if (drawing.getContext) {
      var context = drawing.getContext('2d');
      // 绘制红色描边矩形
      context.lineWidth = 10;
      context.lineCap = "butt";
      context.lineJoin = "round";
      context.strokeStyle = "#ff0000";
      context.strokeRect(50, 50, 300,300);

      // 绘制半透明蓝色描边矩形
      context.lineWidth = 20;
      context.lineCap = "butt";
      context.lineJoin = "bevel";
      context.strokeStyle = "rgba(0, 0, 255, 0.5)";
      context.strokeRect(100, 100, 300, 300);

      // 清除一个矩形
      context.clearRect(150, 40, 100, 100);
    }
  </script>
</body>
</html>

效果图：
在这里插入图片描述

__Zoe__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas 元素绘制矩形

使用 canvas 元素，必须先设置 width 和 height 属性，指定可以绘图的区域大小。要在这块画布上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用 getContext() 方法并传入上下文的名字。传入“2d”，就可以取得2D上下文对象。与矩形相关的方法包括：fillRect()、strokeRect()、clearRect()。这三个方法都能接收 4 个参数：矩形...
复制链接

扫一扫

专栏目录