怎样绘制一条线段

luoye 2021年03月09日编程语言 436 0

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

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

IT源码网 jquery 前端

微信公众号号：IT虾米（左侧二维码扫一扫）欢迎添加！

Q : 823053937

热贴推荐

怎样绘制一条线段