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

wjlgryx

浏览: 306624 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html5 文章

JavaScript

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>

分享到：

使用 HTML5 canvas 进行 Web 绘图 | JSON 的说明

2011-03-17 14:01
浏览 2367
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论