用canvas写了个超级简单的写字板
<html>
<head>
<title>Canvas tutorial</title>
<style type=”text/css”>
body {margin:0px;padding:0px;}
canvas { border: 1px solid black; position:absolute;top:170px;left:300px;margin:0px;padding:0px;}
</style>
</head>
<body>
<canvas id=”tutorial” width=”300″ height=”300″></canvas>
<script>
function thumbnail(){
this.load = function(){
this.canvas = document.getElementById(‘tutorial’);
if (this.canvas.getContext){
this.ctx = this.canvas.getContext(’2d’);
}
this.ispause=true;//是否暂停绘画，在鼠标按键松开的时候
this.c_p=getPosition(this.canvas);
}
}
window.onload = function(){
window.thumb = new thumbnail();
thumb.load();
thumb.canvas.onmouseup=function(){
thumb.ispause=true;
}
thumb.canvas.onmousedown=function(event){
thumb.ispause=false;
var point = {x: (event.clientX-thumb.c_p.sl), y:(event.clientY-thumb.c_p.st)};
thumb.ctx.moveTo(point.x,point.y);
}
thumb.canvas.onmousemove=function(event){
if (thumb.ispause) return;
var point = {x: (event.clientX-thumb.c_p.sl), y:(event.clientY-thumb.c_p.st)};
thumb.ctx.lineTo(point.x,point.y);
thumb.ctx.moveTo(point.x,point.y);
thumb.ctx.stroke();
}
}
var getPosition=function(element)
{//注意用到这个方法的 一定得要有个唯一的id,得到的是以body为宿主对象的坐标相关参数
var offsetTop=element.offsetTop;
var offsetLeft=element.offsetLeft;
while (element=element.offsetParent)
{
if (element.style.position==’absolute’ || element.style.position==’relative’ || (element.style.overflow!=’visible’ && element.style.overflow!=”))
{
break;
}
offsetTop+=element.offsetTop;
offsetLeft+=element.offsetLeft;
}
var sp={};
sp.st=offsetTop;
sp.sl=offsetLeft;
return sp;
}
</script>
</body>
</html>
03/06/2010 at 5:12 下午 Permalink
啊啊啊