2021-05-26 canvas用法:绘制线段与几何图形

最新推荐文章于 2024-10-28 09:41:11 发布

原创最新推荐文章于 2024-10-28 09:41:11 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #css #javascript #html5

知识点专栏收录该内容

96 篇文章

订阅专栏

本文介绍了HTML5 Canvas的基本绘图操作，包括如何绘制线段和创建封闭图形。通过手动闭合图形或使用closePath()方法，可以实现不同类型的几何形状的绘制。更多Canvas用法可参考相关教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<canvas style="width: 500px;height:500px"></canvas>

1.线段绘制:

//1.获取元素
var canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
//2.绘制线段
//2.1.起点
ctx.moveTo(0, 450);
//2.2.终点
ctx.lineTo(150, 50);
//2.3.设置线段宽度
ctx.lineWidth = 5;
//2.4.设置线段颜色
ctx.strokeStyle = "blue";
//2.5.描边
ctx.stroke();

//表示这是一条新线段
ctx.beginPath();
//新线段代码同上
ctx.moveTo(0, 50);
ctx.lineTo(150, 150);
ctx.lineWidth = 2;
ctx.strokeStyle = "yellow";
ctx.stroke();

2.封闭图形绘制:
  两种方法:
    一是手动闭合图形(起点终点一致)
    二是使用closePath()方法

    //2.绘制封闭图形
    ctx.beginPath();

    //2.1.手动闭合
    ctx.moveTo(50, 150);
    ctx.lineTo(150, 150);
    ctx.lineTo(150, 50);
    ctx.lineTo(50, 50);
    ctx.lineTo(50, 150);
    //设置填充颜色
    ctx.fillStyle = "orange";
    //封闭图形填充
    ctx.fill();

    //2.2.用closePath()方法自动闭合
    // ctx.moveTo(50, 150);
    // ctx.lineTo(150, 150);
    // ctx.lineTo(150, 50);
    // ctx.lineTo(50, 50);
    // ctx.closePath();

    ctx.lineWidth = 4;
    ctx.strokeStyle = "green";
    ctx.stroke();