前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas简单小应用之绘制三角形

canvas简单小应用之绘制三角形

作者头像
十月梦想
发布2018-08-29 11:02:39
4800
发布2018-08-29 11:02:39
举报
文章被收录于专栏:十月梦想

通过上篇文章已经掌握了线条的简单绘制,接下来看一下三角形的绘制过程

完整代码如下

代码语言:javascript
复制
<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>
  1. 首先通过上边文章介绍的方法绘制出三角形的一条边
  2. 定义另一条边的末端(无需重新定义第二条的初始位置,默认冲第一条的末端连接第二条末端),闭合路径stroke()
  3. 两条线连接完毕,第三条无需定义到起始点进行连接,使用closePath()闭合路径,会将当前末端的点与初始点连接,当然此时还要进行线路的闭合使用stroke()一个三角形(空心展现出来)
  4. 至此你可以进一步把三角形内部进行填充颜色,使用变为全选的实心三角形,很简单,在三角形完成之后,进行填充色声明fillStyle,然后执行填充fill(),这样就ok了. 下面是填充后的三角形实例代码:
  5. <!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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档