javascript实现的白板效果(可以直接在网页上写字)

145 阅读 0 评论 96 点赞

我是靠谱客的博主落寞钢笔，最近开发中收集的这篇文章主要介绍javascript实现的白板效果(可以直接在网页上写字)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<script type="text/javascript"> 
var ball; 
var mouseX = 100; 
var mouseY = 100; 
var angle = 0; 
var radius = 0; 

function draw(){ 
ball = document.createElement("span"); 
ball.style.position = "absolute"; 
ball.style.color = "#FF0000"; 
ball.style.zIndex = 999999999; 
ball.innerHTML = "●"; 
document.body.appendChild(ball); 

ball.style["left"] = mouseX+ "px"; 
ball.style["top"] = mouseY+ "px"; 
} 
function MousePos(e) 
{ 
e = e || window.event; 
var x,y; 
if(!document.all){ 
x = e.pageX; 
y = e.pageY; 
} 
else{ 
x = event.clientX + document.documentElement.scrollLeft; 
y = event.clientY + document.documentElement.scrollTop; 
} 
return {x:x,y:y}; 
} 
function setXY(e) 
{ 
e = e || window.event; 
var pos = MousePos(e); 
mouseX = pos.x; 
mouseY = pos.y; 
draw(); 
} 
window.onload = function(){ 
document.documentElement.onmousemove = function(e){ 
e = e || window.event; 
setXY(e); 
}; 
} 
</script> 