标签：
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或者lineTo都不会画出图像，用使用stroke或fill函数才能画出图像
绘制树冠轮廓的函数
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 }
标签：
原文地址：http://www.cnblogs.com/yangyu54/p/4562749.html
