使用HTML5CANVAS完成的一个网页白板
1.<html>
2.
3.<head>
4.<meta http-equiv="Content-Type" contentType="text/html; charset=UTF-8" %>
5.<title>Title</title>
6.<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ">
7.var ball;
8.var mouseX = 100;
9.var mouseY = 100;
10.var angle = 0;
11.var radius = 0;
12.
13.var ballstyle = "."
14.var ballcolor = "#FF0000";
15.var allzindex = 0;
16.
17.var cav_elem;
18.var cav_context;
19.
20.//old positon
21.var opos;
22.
23.function draw(){
24. ball = document.createElement("p");
25. ball.style.position = "absolute";
26. ball.style.color = ballcolor;
27. ball.style.zIndex = allzindex+1;
28. ball.innerHTML = ballstyle;
29. document.body.appendChild(ball);
30. document.all.selected = false;
31.
32. ball.style["left"] = mouseX+ "px";
33. ball.style["top"] = mouseY+ "px";
34.}
35.function draw_cav(npos){
36.
37.
38.
39. if(opos){
40. cav_context.beginPath();
41. // Start from the top-left point.
42.
43. cav_context.moveTo(opos.x,opos.y);
44. cav_context.lineTo(npos.x,npos.y);
45.
46. cav_context.stroke();
47. cav_context.closePath();
48.
49. }
50.
51.}
52.
53.function MousePos(e){
54. ee = e || window.event;
55. var x,y;
56. if(!document.all){
57. x = e.pageX;
58. y = e.pageY;
59. }
60. else{
61. x = event.clientX + document.documentElement.scrollLeft;
62. y = event.clientY + document.documentElement.scrollTop;
63. }
64. return {x:x,y:y};
65.}
66.function setXY(e){
67. ee = e || window.event;
68. var pos = MousePos(e);
69. mouseX = pos.x;
70. mouseY = pos.y;
71. //if(e.button == 1){
72. draw_cav(pos);
73. //}
74. opos = pos;
75.}
76.window.onload = function(){
77.
78. //get canvas and context
79. var elem = document.getElementById('myCanvas');
80. if (elem && elem.getContext) {
81. cav_elem = elem;
82. var context = elem.getContext('2d');
83. if (context) {
84. cav_context = context;
85. //cav_context.fillRect(0, 0, cav_elem.width, cav_elem.height);
86. }
87. }
88.
89. //add mouse action
90. document.documentElement.onmousemove = function(e){
91. ee = e || window.event;
92. setXY(e);
93. };
94.}
95.</ｓｃｒｉｐｔ>
96.</head>
97.<body onselectstart = "return false;">
98. <canvas id="myCanvas" border="1" width="1000" height="400">
99. Fallback content, in case the browser does not support Canvas.
100. </canvas>
101.</body>
102.</html>
