HTML5 canvas

  canvas主要用于绘制简单的2D图形,具备基本绘图能力的2D上下文。webGL用于绘制3D图形,但支持不够好。下面我们主要来说明绘图的步骤,以及有哪些绘图API。

绘图步骤

  1. 创建画布,指定绘图区域,必须指定宽高,否则画布不显示。
1 <!-- 创建一个长200,宽200的画布 -->
2 <canvas id="drawing" width="200" height="200"></canvas>

  2. 获取上下文,调用getContext方法进行获取。

1 var drawing= document.getElementById('drawing');
2 if (drawing.getContext) { // 检测浏览器是否支持canvas
3     var context = drawing.getContext('2d');
4 }

  3. 在上下文中进行图形绘制,绘制相关api将在后面详细进行描述。

  4. 最后,可以将绘制的图片导出。使用toDataURL()方法。

绘图API

  1. 基本绘图操作

  1. 填充:使用fillStyle属性设置样式。其值可以是颜色,渐变对象,模式对象。
  2. 描边:使用strokeStyle属性设置样式。

  2. 绘制矩形

  fillRect(x, y, w, h);   使用fillStyle设置的样式。

  strokeRect(x, y, w, h);   使用strokeStyle设置的样式。

  其中,x,y为矩形的起点,w为矩形的宽,h为矩形的高。

  并且描边的边线样式,可以通过设置lineWidth,lineCap,lineJoin进行设置。

 1 if (canvas1.getContext) {
 2     // 获取2d上下文
 3     context = canvas1.getContext('2d');
 4 
 5     // 以(10, 10)点为起点,绘制长宽为50的红色矩形框
 6     context.fillStyle = '#ff0000';
 7     context.fillRect(10, 10, 50, 50);
 8     // 以(30, 30)点为起点,绘制长宽为50的半透明蓝色矩形框
 9     context.fillStyle = 'rgba(0, 0, 255, 0.5)';
10     context.fillRect(30, 30, 50, 50);
11 }

  3. 绘制路径

  在绘图之前需要调用beginPath()方法,开始绘制路径。在绘图之后调用closePath()方法,结束路径绘制。

 

  绘制路径API

  1. arc(x, y, radius, startAngle, endAngle, counterclockwise);  以(x, y)为圆心绘制圆弧

  2. arcTo(x1, y1, x2, y2, radius);  绘制连接(x1, y1),(x2, y2)且半径为radius的圆弧

  3. lineTo(x, y);   从当前点开始绘制到(x, y)

  4. moveTo(x, y);   移动到(x, y)点,不绘制图像

  5. rect(x, y, w, h);  绘制矩形路径 

   

  最后使用fill()或 stroke()进行填充或描边,或者使用clip()对路径进行裁剪。

  4. 绘制文本

  strokeText(text, x, y);

  fillText(text, x, y);

  我们可以通过设置font,textAlign,textBaseline属性,设置文本大小和对齐方式。

  

  钟表代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>canvas clock</title>
 7 </head>
 8 
 9 <body>
10     <canvas id="clock" width="200px" height="200px" style="border: 1px solid gray"></canvas>
11 </body>
12 <script>
13 var canvas = document.getElementById('clock');
14 
15 if (canvas.getContext) {
16     var context = canvas.getContext('2d');
17 
18     context.beginPath();
19     // 外圈
20     context.arc(100, 100, 98, 0, Math.PI * 2, false);
21 
22     // 内圈
23     context.moveTo(194, 100);
24     context.arc(100, 100, 94, 0, Math.PI * 2, false);
25 
26     // 绘制分针
27     context.moveTo(100, 100);
28     context.lineTo(100, 10);
29 
30     // 绘制时针
31     context.moveTo(100, 100);
32     context.lineTo(30, 100);
33     // context.endPath();
34 
35     context.strokeStyle = '#ff0000';
36     context.stroke();
37 
38     // 绘制文本
39     context.font = 'bold 16px Arial';
40     context.textAlign = 'center';
41     context.textBaseline = 'top';
42 
43     context.fillText('12', 100, 8);
44 
45 }
46 </script>
47 
48 </html>
View Code

  

  最后,我们还可以通过canvasAPI实现阴影效果,渐变效果,模式等。

svg vs canvas

  svg(Scalable Vector Graphics) 是一种使用XML描述2D图形的语言。它是基于XML的,意味着其中的dom元素可以添加javascript事件。 并且SVG属性发生变化时,浏览器自动重现图片,不失真。

  canvas时通过js绘制2D图形,逐像素进行渲染。使用canvas绘制的图片一旦绘制完成后,便不再被关注。如果发生变化,需要重新绘制。

 

posted @ 2017-02-15 09:14  勤劳的小叶酱  阅读(203)  评论(0编辑  收藏  举报