小试canvas鼠标绘图

小试canvas鼠标绘图
作者：Neoxone 发表时间： 2010年09月2号，星期四阅读：6,764 次

只是小小的Demo。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>cssass.com</title>
<style>
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
</style>
</head>
<body title='鼠标绘图'>
<canvas id="pad" width='1800' height='1000' onmousedown=draw(event) style='border:1px solid #ccc'>ie用户(9以下)请忽略</canvas>
<script type="text/javascript">
var $id=function(n){
	return document.getElementById(n) || n;
}
var D={
	width : 0.2 ,
	randRGB : function(){ return Math.round(Math.random()*250) },
	color : function(){return 'rgba(' + D.randRGB() + ',' + D.randRGB() + ',' + D.randRGB() + ' , 1)'}
}
var draw=function(e){
	var e=window.event || e;
	var o=$id("pad");
	var con=o.getContext('2d');
	con.beginPath();
	con.moveTo(e.clientX,e.clientY);
	con.strokeStyle = D.color();
	con.lineWidth=D.width;
	con.lineCap ='round';
	con.lineJoin = 'round';
	document.onmousemove=function(e){
		con.lineTo(e.clientX,e.clientY);
		con.stroke();
		document.onmouseup=function(){
			document.onmousemove=null;
		}
	}
}
</script>
</body>
</html>

html canvas应用前景将无可限量——刚看到baidu UEO有一个鼠标点分析热力图的项目。

因为粗略的做好后，没怎么测试就直接发上来了。所以有了些问题，现已修改。
感谢BoKeam的提醒，呵呵。

我之前用window.onload来绑定函数修改canvas的高度，这通过运行框运行open新页面，在chrome下获取document.documentElemnet.offsetHeight时会等于0，导致绘图板高度也没了。
另外发现，Opera下绘线同其他浏览器有点差别：单独的一个path(即同上一次的path没有瓜葛)，如果没有moveTo设置起点，一般浏览器会以第一个lineTo为起点，这在Opera下是不正确的。

标签： canvas, HTML5

这篇文章发布于 2010年09月2号，星期四，18:19，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

小试canvas鼠标绘图
作者：Neoxone 发表时间： 2010年09月2号，星期四阅读：6,764 次

相关文章:

4 条评论发表在“小试canvas鼠标绘图”上

留下回复

小试canvas鼠标绘图作者：Neoxone 发表时间： 2010年09月2号，星期四 阅读：6,764 次

相关文章:

4 条评论 发表在“小试canvas鼠标绘图”上

留下回复

小试canvas鼠标绘图
作者：Neoxone 发表时间： 2010年09月2号，星期四阅读：6,764 次

4 条评论发表在“小试canvas鼠标绘图”上