应用HTML5CANVAS完成的一个网页白板
日期：2014-05-17 浏览次数：20722 次
使用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 ele
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 ele
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
