Html5-canvas

1. Html5-canvas：
2. 坐标是x向右，逐步增大，

y坐标向下增大，原点在画布的左上角.长度单位是一个像素；

像素是一个密度单位,而厘米是长度单位,两者无法比较；

Html5的绘图函数：

1. 2.       function draw(){
2. 3.                           //得到画笔
3. 4.                           var canvas = document.getElementById("mycanvas");
4. 5.                           //得到上下文引用，可以理解为画笔
5. 6.                           var cxi = canvas.getContext("2d");
6. 7.                           //画线
7. 8.                           cxi.moveTo(20,20);
8. 9.                           cxi.lineTo(20,190);
9. 10.                       cxi.lineTo(50,190);
10. 11.                       cxi.stroke();
11. 12.    
12. 13.                       //开始新路径
13. 14.                       cxi.beginPath();
14. 15.                       cxi.moveTo(80,20);
15. 16.                       cxi.lineTo(80,190);
16. 17.                       cxi.lineTo(150,190);
17. 18.                       //闭合路径，把最后的点和第一个点闭合
18. 19.                       cxi.closePath();
19. 20.                       //cxi.fill();
20. 21.                       cxi.stroke();
21. 22.    
22. 23.                       //对于矩形可以不用画线
23. 24.                       //strokeRect(x,y,width,height);
24. 25.                       //cxi.strokeRect(160,20,100,200);
25. 26.                       //改变填充颜色
26. 27.                       cxi.fillStyle="#00ff00";
27. 28.                       cxi.fillRect(160,20,100,200);
28. 29.    
29. 30.                       //画圆形(圆心xy，半径：radius，0开始，2pi结束，顺逆时针)
30. 31.                       //六个参数：arc(x,y,radius,startAngle,endAngle,counterclockwise)
31. 32.                       cxi.beginPath();
32. 33.                       cxi.arc(320,80,50,0,2*Math.PI,true);
33. 34.                       cxi.closePath();
34. 35.                       cxi.fillStyle="#0000ff";
35. 36.                       cxi.fill();
36. 37.                       cxi.stroke();
37. 38.    
38. 39.                       //画图片
39. 40.                       //创建image对象
40. 41.                       var image=new Image();
41. 42.                       //指定是哪个图
42. 43.                       image.src="images/1sw.jpg";
43. 44.                       image.onload=function(){
44. 45.                                cxi.drawImage(image,380,20,640,657);
45. 46.                       }
46. 47.                       //写字
47. 48.                       var text="哇有美女";
48. 49.                       cxi.fillStyle="#ff0000";
49. 50.                       cxi.font="50px 华文彩云";
50.                     cxi.fillText(text,10,400);
51.            }
52.          //如果你在函数中，没有定义就直接使用变量，就意味你使用的全局变量，

                   //如果你在函数中， 定义了 才使用该变量，说明使用的局部变量

Html5-canvas,布布扣,bubuko.com

Html5-canvas

原文：http://www.cnblogs.com/lyc2014/p/3600409.html