怎样绘制一个三角形边框

xmjava 2021年03月09日编程语言 437 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源码网 jquery 前端

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

Q : 823053937

热贴推荐

怎样绘制一个三角形边框