怎样绘制一条线段

标签：lin   nbsp   class   第一个   绘制   img   直线   span   line   

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

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();

怎样绘制一条线段

标签：lin   nbsp   class   第一个   绘制   img   直线   span   line   

原文地址：https://www.cnblogs.com/aisowe/p/11570419.html