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>
  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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web项目聚集地

CSS布局解决方案(全屏布局)

原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1

28840
来自专栏林德熙的博客

win10 uwp 标题栏 扩展标题栏修改颜色透明标题栏 系统状态栏

我们应用最上方的是标题栏,对于手机,最上方是状态栏。 我们可以自定义标题栏,和不显示标题栏。

42420
来自专栏二次元

HTML5画布-小球碰撞

       html5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

17700
来自专栏非典型技术宅

iOS之分段控制器UISegmentedControl1. 分段控制器(UISegmentedControl)2. 事件监听3. 手势事件大全

12320
来自专栏余生开发

markdown基本语法

markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

11440
来自专栏Nian糕的私人厨房

CSS 鼠标悬停图片,显示隐藏文本

我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

16140
来自专栏Android-薛之涛

Android-ConstraintLayout详解(下)

我们接着上一篇说一说ConstraintLayout的其他属性,如果没看过上一篇:Android-ConstraintLayout详解 先罗列一下此次的会议内...

21730
来自专栏深度学习之tensorflow实战篇

HTML5与HTML4的区别,新增的元素有哪些?

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由 解决Web上存在的问题: Web浏览器间的兼容性低:在...

42860
来自专栏Android知识点总结

SpringBoot-10-之初阶整合篇(下)

8120
来自专栏Sorrower的专栏

界面无小事(九): 做个好看的伸缩头部

17220

扫码关注云+社区

领取腾讯云代金券