canvas简单小应用之绘制三角形
通过上篇文章已经掌握了线条的简单绘制,接下来看一下三角形的绘制过程
完整代码如下
<canvas width="800" height="500" id="canvas"></canvas>
<script type="text/javascript">
//获得画板
var c=document.getElementById('canvas');
//获得绘画环境
var cv=c.getContext('2d');
//线条宽度
cv.lineWidth=15;
//线条颜色填充
cv.strokeStyle='orange';
//开启绘画路径
cv.beginPath();
//画笔初始化点
cv.moveTo(50,120);
//画笔目标位置
cv.lineTo(50,400);
//连接路径
cv.stroke();
cv.lineTo(350,400);
cv.stroke();
// cv.lineTo(50,120);
// cv.stroke();
cv.closePath();//闭合线路(首尾坐标)
cv.stroke();//连接首尾
</script>- 首先通过上边文章介绍的方法绘制出三角形的一条边
- 定义另一条边的末端(无需重新定义第二条的初始位置,默认冲第一条的末端连接第二条末端),闭合路径stroke()
- 两条线连接完毕,第三条无需定义到起始点进行连接,使用closePath()闭合路径,会将当前末端的点与初始点连接,当然此时还要进行线路的闭合使用stroke()一个三角形(空心展现出来)
- 至此你可以进一步把三角形内部进行填充颜色,使用变为全选的实心三角形,很简单,在三角形完成之后,进行填充色声明fillStyle,然后执行填充fill(),这样就ok了. 下面是填充后的三角形实例代码:
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 直角三角形绘制</title> <style type="text/css"> *{ margin:0; padding:0; } #canvas{ border: 3px solid rgba(0,255,0,0.4); background: rgba(255,0,255,0.9); } </style> </head> <body> <canvas width="800" height="500" id="canvas"> <script type="text/javascript"> //获得画板 var c=document.getElementById('canvas'); //获得绘画环境 var cv=c.getContext('2d'); //线条宽度 cv.lineWidth=15; //线条颜色填充 cv.strokeStyle='yellow'; //开启绘画路径 cv.beginPath(); //画笔初始化点 cv.moveTo(50,120); //画笔目标位置 cv.lineTo(50,400); //连接路径 cv.stroke(); cv.lineTo(350,400); cv.stroke(); // cv.lineTo(50,120); // cv.stroke(); cv.closePath();//闭合线路(首尾坐标) cv.stroke();//连接首尾 //填充颜色 cv.fillStyle='orange'; //闭合填充路径 cv.fill(); </script> </canvas> </body> </html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-1-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
