IT源码网

怎样绘制一条线段讲解

luoye 2021年03月09日 编程语言 185 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源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样绘制矩形讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。