使用HTML5CANVAS完成的一个网页白板

wjlgryx · 发表于 2013-1-29 09:30:57

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>

		自动登录	找回密码
密码			立即注册