文章由【网友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 )
};
效果如下：
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery