HTML5:Canvas-绘制图形

时间 2020-05-17

原文原文链接

到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到Canvas前，需掌握路径，咱们看看到底怎么作。javascript

栅格css

在咱们开始画图以前，咱们须要了解一下画布栅格（canvas grid）以及坐标空间。上一页中的HTML模板中有个宽150px, 高150px的canvas元素。如右图所示，canvas元素默认被网格所覆盖。一般来讲网格中的一个单元至关于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。全部元素的位置都相对于原点定位。因此图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。在课程的最后咱们会平移原点到不一样的坐标上，旋转网格以及缩放。如今咱们仍是使用原来的设置。html

绘制矩形

不一样于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。全部其余的图形的绘制都至少须要生成一条路径。不过，咱们拥有众多路径生成的方法让复杂图形的绘制成为了可能。java

首先，咱们回到矩形的绘制中。canvas提供了三种方法绘制矩形：canvas

1 fillRect(x, y, width, height): 绘制一个填充的矩形
1 strokeRect(x, y, width, height): 绘制一个矩形的边框
1 clearRect(x, y, width, height): 清除指定矩形区域，让清除部分彻底透明。

上面提供的方法之中每个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。函数

下面的draw() 函数是前一页中取得的，如今就来使用上面的三个函数。spa

矩形例子

 1 function draw() {  2  var canvas = document.getElementById('canvas');  3  if (canvas.getContext) {  4  var ctx = canvas.getContext('2d');  5 
 6  ctx.fillRect(25,25,100,100);  7  ctx.clearRect(45,45,60,60);  8  ctx.strokeRect(50,50,50,50);  9  } 10 }

输出以下：3d

fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个60*60px的正方形，接着strokeRect()在清除区域内生成一个50*50的正方形边框。code

接下来咱们可以看到clearRect()的两个可选方法，而后咱们会知道如何改变渲染图形的填充颜色及描边颜色。htm

不一样于下一节所要介绍的路径函数（path function），以上的三个函数绘制以后会立刻显如今canvas上，即时生效。

ps：你也能够设置边框的大小

lineWidth = 2;

可是得注意,须要在strokeRect的前面使用不然不会显示出来

绘制路径

图形的基本元素是路径。路径是经过不一样颜色和宽度的线段或曲线相连造成的不一样形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形须要一些额外的步骤。

首先，你须要建立路径起始点。
而后你使用画图命令去画出路径。
以后你把路径封闭。
一旦路径生成，你就能经过描边或填充路径区域来渲染图形。

如下是所要用到的函数：

beginPath(): 新建一条路径，生成以后，图形绘制命令被指向到路径上生成路径。
closePath(): 闭合路径以后图形绘制命令又从新指向到上下文中。
stroke(): 经过线条来绘制图形轮廓。
fill(): 经过填充路径的内容区域生成实心的图形。

生成路径的第一步叫作beginPath()。本质上，路径是由不少子路径构成，这些子路径都是在一个列表中，全部的子路径（线、弧形、等等）构成图形。而每次这个方法调用以后，列表清空重置，而后咱们就能够从新绘制新的图形。

注意：当前路径为空，即调用beginPath()以后，或者canvas刚建的时候，第一条路径构造命令一般被视为是moveTo（），不管其实是什么。出于这个缘由，你几乎老是要在设置路径以后专门指定你的起始位置。

第二步就是调用函数指定绘制路径，本文稍后咱们就能看到了。

第三，就是闭合路径closePath(),不是必需的。这个方法会经过绘制一条从当前点到开始点的直线来闭合图形。若是图形是已经闭合了的，即当前点为开始点，该函数什么也不作。

注意：当你调用fill()函数时，全部没有闭合的形状都会自动闭合，因此你不须要调用closePath()函数。可是调用stroke()时不会自动闭合。

　咱们来看一个例子用canvas画三角形

 1 <html>
 2   <head>
 3     <title>Canvas tutorial</title>
 4     <script type="text/javascript">
 5       function draw(){  6         var canvas = document.getElementById('tutorial');  7         if (canvas.getContext){  8           var ctx = canvas.getContext('2d');  9           
10  ctx.beginPath(); 11           ctx.moveTo(47,60); 12           ctx.lineTo(80,20); 13           ctx.lineTo(117,60); 14  ctx.fill(); 15           
16  } 17  } 18     </script>
19     <style type="text/css">
20  canvas { border: 1px solid black; } 21     </style>
22   </head>
23   <body onload="draw();">
24     <canvas id="tutorial" width="150" height="150"></canvas>
25   </body>
26 </html>

显示以下的三角形

moveTo（47，60）就是从栅格里面找到宽度47,高度60的位置（起点位置）

lineTo(80，20) 就是从栅格里面找到宽度80，高度20的位置（终点位置）而后起点链接这个位置

lineTo(117,60);就是从栅格里面找到宽度117，高度60的位置,在链接这个位置就造成了三角形

再看下面的例子：

 1 function draw() {  2  var canvas = document.getElementById('canvas');  3  if (canvas.getContext){  4  var ctx = canvas.getContext('2d');  5 
 6  // 填充三角形
 7  ctx.beginPath();  8  ctx.moveTo(25,25);  9  ctx.lineTo(105,25); 10  ctx.lineTo(25,105); 11  ctx.fill(); 12 
13  // 描边三角形
14  ctx.beginPath(); 15  ctx.moveTo(125,125); 16  ctx.lineTo(125,45); 17  ctx.lineTo(45,125); 18  ctx.closePath(); 19  ctx.stroke(); 20  } 21 }

这里从调用beginPath()函数准备绘制一个新的形状路径开始。而后使用moveTo()函数移动到目标位置上。而后下面，两条线段绘制后构成三角形的两条边。

你会注意到填充与描边三角形步骤有所不一样，

由于路径使用填充（filled）时，路径自动闭合，使用描边（stroked）则不会闭合路径。若是没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并非一个完整的三角形。

圆弧

绘制圆弧（圆上任意两点就是圆弧）或者圆,咱们使用arc方法,当前可使用arcTo,不过相对arc更加简单上手度高

arc（x, y, radius, startAnglem endAngle, anticlockwise）

arc有六个参数

x，就是x轴

y，就是y轴

radius,就是半径

startAnglem 开始的弧度

endAngle 结束的弧度

anticlockwise 可选,默认按顺时针,可选逆时针

先来个例子：

 1 <html>
 2   <head>
 3     <title>Canvas tutorial</title>
 4     <script type="text/javascript">
 5  function draw(){  6         var canvas = document.getElementById('tutorial');  7         if (canvas.getContext){  8           var ctx = canvas.getContext('2d');  9           ctx.arc(50,50,40,0, Math.PI); 10  ctx.stroke(); 11  } 12  } 13     </script>
14     <style type="text/css">
15  canvas { border: 1px solid black; } 16     </style>
17   </head>
18   <body onload="draw();">
19     <canvas id="tutorial" width="150" height="150"></canvas>
20   </body>
21 </html>

显示以下：

上面是180°,下面只要180° * 2 = 360°就能够画圆了以下

这里须要注意的是这里的arc()函数的角度单位是弧度,不是度数

角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

360°换成弧度就是这样

360 * Math.PI/180