HTML5 Canvas （一）

1.历史

Canvas的概念最初是由苹果公司提出，用于Mac OS X WebKit中创建控制板部件（dashboard widget）.

2.canvas

在页面使用canvas时，它会创建一块矩形区域。默认该矩形区域宽为300像素，高为150像素。

<canvas></canvas>

3.canvas坐标

canvas坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。

4.canvas和css

canvas通过应用css来增加边框，设置内边距、外边距等，而且一些css属性还可以被canvas内的元素继承。

5.检查浏览器是否支持canvas

try
{
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML="HTML5 Canvas is supported in your browser.";
}
catch(e)
{
document.getElementById("support").innerHTML="HTML5 Canvas is not supported in your browser.";
}

6.在canvas中绘制一条对角线

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
<script>
function drawDiagonal()"{

var canvas=document.getElementById(‘diagonal‘);
var context=canvas.getContext(‘2d‘);

context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);

context.stroke();
}
</script>

7.用变换的方式在canvas上绘制对角线

 1 <script>
 2
 3 function drawDiagonal(){
 4
 5 var canvas=document.getElementById(‘diagonal‘);
 6
 7 var context=canvas.getContext(‘2d‘);
 8
 9 //save current  draw status
10
11 context.save();
12
13 //向右下方移动绘图上下文
14
15 context.translate(70,140);
16
17 //以原点为起点，绘制于前面相同的线段
18
19 context.beginPath();
20 context.moveTo();
21 context.lineTo(70,-70);
22 context.stroke();
23
24 //恢复原有的绘图状态
25 context.restore();
26
27 }
28 windows.addEventListener("load",drawDiagonal,true);
29 </script>

8.路径

不论要开始绘制何种图形，第一个要调用的就是beginPath。接着就可以用context的各种方法来绘制想要的形状。

context路径函数：

• moveTo(x,y):不绘制，只是将当前位置移动到新的目标坐标（x,y）
• lineTo(x,y):不仅将当前位置移动到（x,y），而且在两个坐标之间画一条直线

不论用moveTo或者lineTo都不会画出图像，用使用stroke或fill函数才能画出图像

• closePath():行为与lineTo很像，closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知当前绘制的图形已经闭合或者形成了完全封闭的区域。

绘制树冠轮廓的函数

 1 function createCanopyPath(context){
 2 //绘制树冠
 3 context.beginPath();
 4
 5 context.moveTo(-25,-50);
 6 context.lineTo(-10,-80);
 7 context.lineTo(-20,-80);
 8 context.lineTo(-5,-110);
 9 context.lineTo(-15,-110);
10
11 //树的顶点
12 context.lineTo(0,-140);
13
14 context.lineTo(15,-110);
15 context.lineTo(5,-110);
16 context.lineTo(20,-80);
17 context.lineTo(10,-80);
18
19 context.lineTo(25,-50);
20
21 //连接起点，闭合路径
22 context.closePath();
23
24 }

在canvas上画树的函数

 1 function drawTrails(){
 2 var canvas=document.getElementById(‘trails‘);
 3 var context=canvas.getContext(‘2d‘);
 4
 5 context.save();
 6 context.translate(130,250);
 7
 8 //创建表现树的路径
 9 createCanopyPath(context);
10
11 //绘制当前路径
12 context.stroke();
13 context.restore();
14 }