canvas画三角形

绘制一个三角形
例如,绘制三角形的代码如下:

function draw() { 
var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(20,20);  //绘制起始点
            ctx.lineTo(10,90);
            ctx.lineTo(90,90);
            // ctx.fill();   //填充
![Uploading 45416FA1-329C-4054-A94A-08B732DF8B3B_494408.png . . .]
            ctx.lineWidth = 10;  //线的宽度
            ctx.strokeStyle = 'red';  // 线的颜色变红
            ctx.lineJoin = 'round';  //设置线的圆角   用于转交和两条线的交接点
            // ctx.lineCap = 'round';  //设直线的
            ctx.closePath(); //结束绘制
            ctx.stroke(); //划线   连接点  划线


            ctx.beginPath();
            ctx.moveTo(120,120);  //绘制起始点
            ctx.lineTo(150,190);
            ctx.lineTo(230,190);
            ctx.fill();   //填充
            ctx.lineJoin = 'round';  //设置线的圆角   用于转交和两条线的交接点
}

输出看上去如下:

效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容