网友Adam’分享HTML5学习笔记之Canvas鼠标绘画

作者：管理员

发布时间：2012/12/12 11:52:08

评论数：1

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=193

文章由【网友Adam‘】提供

此文章主要分享了HTML5 Canvas鼠标绘画和小方块移功能，网友们运行的时候请不要用IE浏览，请使用主流的谷歌、火狐等浏览器，这样才可以看到最终效果。

 

实现代码如下：

window.onload = function(){	
	var canvas1 = document.getElementById("canvas1");	
	var o = canvas1.getContext("2d");	
	// WEB钢笔工具
	canvas1.onmousedown = function( e ){
		var e = e || window.event;		
		o.moveTo( e.clientX , e.clientY  );		
		document.onmousemove = function( e ){
			var e = e || window.event;
			o.lineTo( e.clientX - canvas1.offsetLeft , e.clientY - canvas1.offsetTop )
			o.stroke();
		};
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
	};	
	// 小方块向下移动	
	var num = 0;	
	var timer = null;	
	o.fillRect( 0, 0, 100, 100 );	
	var timer = setInterval( function(){
		num += 10 ;		
		if( num > 300 ) clearInterval( timer );		
		o.clearRect( 0, 0, canvas1.width, canvas1.height );		
		o.fillRect( num, num, 100, 100 );		
	}, 30 )
}; 

效果如下：

 

关键字：HTML5 Canvas HTML5学习笔记 Canvas鼠标绘画