Html5-canvas

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.          //如果你在函数中，没有定义就直接使用变量，就意味你使用的全局变量，