html5的canvas写一个简单的画板程序

•2012-06-01 19:52:50•建站知识

这里讲一下思路.其实这里的逻辑相当的简单,鼠标按下的时候.获得按下时候的坐标
ctx.moveTo(e.clientX-10,e.clientY-10)
然后鼠标移动的时候.就不断的画线
!isDown||ctx.lineTo(e.clientX-10, e.clientY-10, 5, 5)
鼠标放开的时候.自然就要吧isDown设置为false了.
然后就总结一下画线的关键步骤好了.
第一步是取得画布.
第二步是开始画线.beginPath()
第三步是移动线条moveTo(),lineTo().
第四步就是画线stroke().
<!DOCTYPE html>

<head>

window.onload = function()

{

if(document.getElementById('c'))

{

var isDown = false;//判断是否按下

var ctx = $('#c').get(0).getContext('2d');//取得画布

ctx.strokeStyle = 'black';//线条颜色

ctx.beginPath();//开始画线

$('body')

.mousedown(function(e){

isDown = true;

ctx.moveTo(e.clientX-10,e.clientY-10);//画笔拿起放到哪一点

})

.mousemove(function(e){

!isDown||ctx.lineTo(e.clientX-10, e.clientY-10, 5, 5); //画笔画到哪一点

ctx.stroke();//画线函数

})

.mouseup(function(){

isDown = false;

});

}else{alert('ss');}

}

</script>

#c{ border:1px solid black;}

</style>

</head>

<body>

本文关键词: html5画板,canvas画板