IT源码网

怎样绘制一个三角形边框讲解

xmjava 2021年03月09日 编程语言 153 0

三角形是由三条直线组成的, 但我们只需要ctx.lineTo()两次, 因为, ctx.closePath()会就路径的起始点连起来. 如下所示: 

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.lineTo(280, 30); 
    // 结束路径绘制, 与ctx.beginPath()相连 
    ctx.closePath(); 
    // 描边, 或者说是"呈现" 
    ctx.stroke() 
} 
draw();

 

发布评论

分享到:

IT源码网

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

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

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