怎样绘制一条线段

Posted 2022-11-24 aisowe

就像画画一样, 首先得有一支笔, 这支笔有粗细, 有颜色, 可以画直线, 也可以画曲线, 然后我们会从某个位置点开始起笔, 然后在另一个位置点结束. 这样就可以画一条线啦~. 具体步骤如下: 

1. 创建一条路径: ctx.beginPath(), 表示拿起画笔准备开画.

2. 将笔移到准备绘制的第一个点: ctx.moveTo();

3. 绘制路径: ctx.lineTo();

4. 结束路径绘制: ctx.closePath();

5. 绘制路径, 给路径添加样式, 比如颜色和粗细等: ctx.stroke()

function draw() 
    var canvas = document.getElementById(‘canv‘);
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    // 开启路径绘制
    ctx.beginPath();
    // 确定路径起点
    ctx.moveTo(30, 30);
    // 绘制路径
    ctx.lineTo(280, 280);
    // 结束路径绘制, 与ctx.beginPath()对应
    ctx.closePath();
    // 描边, 或者说是"呈现"
    ctx.stroke()

draw();