HTML5 Canvas：画出炫酷效果，轻松搞定各种形状

2024-04-04 技术资讯推广

这篇文章主要介绍了关于html5的canvas实现画出简单的矩形和三角形，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下开始绘制，有两种形式，一种是描边（fill），一种是填充（stroke）。

认识HTML5 Canvas

HTML5 Canvas挺好用，可以画图、做动图，甚至给图片加特效。做网页时用它来弄点炫酷效果和互动玩法就成了。反正它能画出各种形状，比如长方形、三角形、圆形等等，让网页更好看。

Canvas元素属性

在开始画Canvas之前，我们首先需要在HTML页面上加入一个Canvas元素，然后设置它的ID和尺寸。这就是你的小画板了，接下来要做的就是从Canvas对象中获取到上下文，就可以随心所欲地描绘你的想法了！

绘制简单图形

你想让Canvas画个矩形或者三角形啥的吗？我们得先搞到个叫”2D上下文”的东东。只需用getContext(“2d”)，就轻松拿到了它！然后你就可以随心所欲地在这个操作环境中进行绘图了！

<canvas id="demo" width="600" height="600">

描边和填充

想要在Canvas上作画呀？很简单，无非是描边与填充两个步骤。描边，就是在图形边缘勾勒出线条，让形状更明显；而填充，就像是给图形上色，填满之后就成了真正的圆形。怎么画全随你心意！

绘制矩形

要在画板上画出矩形，别慌，只要记住这两个好用的家伙：fillRect()和 strokeRect(). fillRect()能填充矩形里头，而 strokeRect()就是描边的好帮手。给他们透露下起点坐标和高度宽度这些小秘密，矩形就在纸上活灵活现！

绘制三角形

画三角形，用 Canvas 的路径绘图功能就搞定了先用 beginPath()开启新的路径，再依次画上三个顶点，用 moveTo()和 lineTo()把它们连起来就好。别忘了最后别漏掉 closePath()关头哟。接下来，无论想进行描边还是填充，随你心意喽！轻松实现心仪的三角形效果就这么简单~

JavaScript代码示例

啰嗦！现在给你说说，咋个把方形和三角形不费劲地画上去？答案就是：用JavaScript~

javascript
咱们有个画布在页面，叫'我的画布',是？
画布的“2D”屏幕绘图，在这个例子里叫ctx。
//绘制矩形
ctx.fillStyle ='red';
这段话就是告诉你怎么使用红色填充一个坐标是(50, 50)，面积为100×100的正方形！
//绘制三角形
 
var cxt=document.getElementById('demo').getContext("2d"); 
cxt.beginPath(); 
cxt.fillStyle="#F00";/*设置填充颜色*/ 
cxt.fillRect(0,0,200,100);/*绘制一个矩形，前两个参数决定开始位置，后两个分别是矩形的宽和高*/ 
cxt.beginPath(); 
cxt.strokeStyle="#000";/*设置边框*/ 
cxt.lineWidth=3;/*边框的宽度*/ 
cxt.strokeRect(0,120,200,100); 
cxt.beginPath(); 
cxt.moveTo(0,350); 
cxt.lineTo(100,250); 
cxt.lineTo(200,300); 
cxt.closePath();/*可选步骤，关闭绘制的路径*/ 
cxt.stroke(); 

ctx.beginPath();

ctx.moveTo(200, 50);

ctx.lineTo(150, 150);

ctx.lineTo(250, 150);

ctx.closePath();

ctx.strokeStyle ='blue';

ctx.stroke();

效果展示

这段代码成功地画出了红色长方形跟蓝色三角形~这就是使用HTML5Canvas画简单图形的方法。多试几次就能学习到很多Canvas绘画技巧，而且很实用。
			    						    						    						    					    		
			    					    				    					    			 原文链接：https://www.icz.com/technicalinformation/web/vue2/2024/04/13234.html，转载请注明出处~~~