Canvas基础入门（二）：绘制直线/折线

wow_DG

于 2024-08-07 18:00:00 发布

阅读量232

点赞数 2

分类专栏： canvas 文章标签：前端 html

本文链接：https://blog.csdn.net/2301_77798916/article/details/140930344

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

🔺绘制直线步骤：

创建画布，获取画笔对象（参考上一篇文章画图步骤）

context.moveTo绘制起点

context.lineTo绘制终点 (折线是多个终点)

context.stroke调用画线的方法

<!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>
    <script>
      //1 创建 canvas 标签
     const canvas = document.createElement("canvas");
     canvas.width = 600;
     canvas.height = 400;
     // 2得到 context对象
     document.body.append(canvas);
     const context = canvas.getContext("2d");
     //3 画直线
     //3.1 起点 (x,y)
     context.moveTo(100, 100);
     //3.2终点 (x,y)
     context.lineTo(300, 100);
     context.lineTo(300, 400);
     context.lineTo(200, 400);
     //设置线条颜色
     context.strokeStyle='yellowgreen'
     //3.3 调用画线的方法
     context.stroke();
    </script>
  </body>
</html>

演示效果