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

最新推荐文章于 2021-06-04 14:58:55 发布

佐笾已逝

最新推荐文章于 2021-06-04 14:58:55 发布

阅读量504

点赞数

分类专栏： Html5 文章文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/wjlgryx/article/details/83873417

版权

Html5 文章专栏收录该内容

80 篇文章 0 订阅

订阅专栏

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>