码迷,mamicode.com
首页 > 其他好文 > 详细

怎样绘制一个三角形边框

时间:2019-09-23 09:36:38      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:需要   组成   怎样   结束   ima   lin   text   element   pat   

三角形是由三条直线组成的, 但我们只需要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();

技术图片

 

怎样绘制一个三角形边框

标签:需要   组成   怎样   结束   ima   lin   text   element   pat   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!