如何在HTML5中使用Canvas绘制图形?
在HTML5中,我们可以使用canvas元素在网页上绘制二维图形。要绘制canvas图形,我们使用<canvas>标签,它创建交互式图形和动画,并将其渲染到Web浏览器中。这个Canvas元素只在HTML 5中可用,之前的版本中没有。它可以生成游戏中和数据领域中复杂的可视化效果,帮助开发人员直观地展示工作成果。在这篇文章中,我们将学习如何使用canvas元素通过各种示例来绘制基本的二维图形设计。
语法
<canvas id="id_name">……write some text……</canvas>
此元素用于绘制几何图形。id选择器目标是具有给定id属性的单个元素。
var var_name = getElementById("id_name")
var是用于在javascript中定义变量的关键字。var_n 1ame是用户设置的变量名。getElementById(“id_name”)匹配特定的id。
使用的属性
示例中使用的属性如下:
color − 定义文本的颜色。
width − 定义画布图形的宽度。
height − 定义画布图形的高度。
HTML Canvas参考
示例中使用了以下参考:
getContext() − 此方法设置二维图形。
beginPath() − begin方法开始起始路径并结束最后一条路径。
rect() − 此方法绘制矩形。
stroke() − 此方法绘制画布图形的路径。
strokeStyle() − 此方法填充画布中几何图形的颜色边框。
fillStyle() − 此方法填充几何图形的颜色。
fill() − 此方法填充画布中当前绘制的几何图形。
lineTo() − 此方法添加新线并在现有点创建线。
moveTo() − 此方法移动画布中的特定点。
closePath() − 此方法从最近的点创建路径并返回到起点。
示例1
在下面的示例中,代码演示了如何使用HTML5 canvas和JavaScript绘制矩形。网页标题为“Canvas形状”,文本“使用Canvas绘制矩形”为红色。代码生成一个ID为“rectangle”的canvas元素,宽度和高度均为200像素。“rect()”方法在JavaScript中用于在画布上绘制矩形,同时指示其位置、宽度和高度。最后,通过调用“stroke()”方法,以标准黑色绘制矩形。
<!DOCTYPE html> <html> <title>Rectangle using Canvas</title> <head> </head> <body> <center> <h1 style="color:red;">Canvas Shapes</h1> <h3>Rectangle</h3> <canvas id="rectangle" width="200" height="200" /> <script> var rg = document.getElementById("rectangle"); var rect = rg.getContext("2d"); rect.beginPath(); rect.rect(10, 10, 170, 100); rect.stroke(); </script> </center> </body> </html>
示例2
在下面的HTML和JavaScript示例中,以下代码创建一个canvas元素,并在其中绘制一个红色的圆圈。圆圈的半径为50像素,中心位于(150, 150)。strokeStyle属性用于以深蓝色勾勒圆圈,fillStyle属性则用红色填充圆圈。要绘制圆圈,请使用arc()方法并指定中心点、半径以及弧度的起始和结束角度。canvas标签的id为“circle”,用于在JavaScript代码中访问canvas元素。为了在网页上水平居中canvas元素,代码包含在一个center标签内。
<!DOCTYPE html> <html> <title>Cirle using Canvas</title> <head> </head> <body> <center> <h1 style="color:red;">Canvas Shapes</h1> <h2>Circle</h2> <canvas id="circle" width="290" height="250" > <script> var cle = document.getElementById("circle"); var ctx = cle.getContext("2d"); ctx.beginPath(); ctx.arc(150, 150, 50, 0, 2*Math.PI ); ctx.strokeStyle = 'darkblue '; ctx.fillStyle = "red"; ctx.fill(); ctx.stroke(); </script> </center> </body> </html>
示例3
在下面的示例中,以下代码演示了如何使用JavaScript在HTML5 canvas上绘制三角形。网页标题为“使用Canvas绘制三角形”,绿色标题文本为“Canvas形状”。代码生成一个ID为“triangle”的canvas元素,尺寸为100像素乘200像素。三角形用JavaScript绘制,首先使用“moveTo()”方法设置笔的初始位置,然后使用“lineTo()”方法绘制连接三角形顶点的线。最后,使用“stroke()”方法绘制三角形轮廓。“closePath()”方法用于关闭三角形的路径,从而完成形状的绘制。
<!DOCTYPE html> <html> <title>Triangle using Canvas</title> <head> </head> <body> <center> <h1 style="color:green;">Canvas Shapes</h1> <h2>Triangle</h2> <canvas id="triangle" width="100" height="200" > <script> var tr = document.getElementById("triangle"); var tri = tr.getContext("2d"); tri.beginPath() tri.moveTo(0, 50); tri.lineTo(50, 0); tri.lineTo(100, 50); tri.lineTo(0, 50); tri.stroke(); tri.closePath(); </script> </center> </body> </html>
结论
我们通过绘制不同的canvas图形形状来探索了这三个示例。然后我们看到了如何使用引用来设置canvas图形的属性。canvas元素使用CSS属性进行样式设置。上述几何图形是由Canvas绘制的,但也可以使用SVG元素绘制。