                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Html5
                        
                        /學(xué)寫一個(gè)字

為什么我的畫出來(lái)的筆畫有點(diǎn)像墨水不足有斷斷續(xù)續(xù)的

<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>鼠標(biāo)，觸屏寫字</title>
</head>
<style>
?? ?#wrap{
?? ??? ?height:400px;
?? ??? ?width:400px;
?? ??? ?margin:100px auto;
?? ?}
?? ?#write{
?? ??? ?height:400px;
?? ??? ?width:400px;
?? ??? ?
?? ?}
</style>
<body>
?? ?<div id="wrap">
?? ??? ?<canvas id="write" height="400" width="400"></canvas>
?? ?</div>
</body>
<script>
window.onload = function(){
?? ?var write = document.getElementById('write');
?? ?var ctx = write.getContext('2d');
?? ?var h = ctx.canvas.height;
?? ?var w = ctx.canvas.width;
?? ?var isMouseDown = false;
?? ?var lastLoc = {x:0,y:0};
drawGruid();
write.onmousedown = function(e){
?? ?e.preventDefault();//阻止默認(rèn)的事件響應(yīng)
?? ?isMouseDown = true;
?? ?lastLoc = winToCanvas(e.clientX,e.clientY);
?? ?// console.log(lastLoc.x+","+lastLoc.y);
}
write.onmouseup = function(e){
?? ?e.preventDefault();
?? ?isMouseDown = false;

}

write.onmousemove = function(e){
?? ?e.preventDefault();
?? ?if(isMouseDown){
?? ??? ?//console.log("mouse move");
?? ??? ?var curLoc =winToCanvas(e.clientX,e.clientY);
?? ??? ?ctx.beginPath();
?? ??? ?ctx.moveTo(lastLoc.x,lastLoc.y);
?? ??? ?ctx.lineTo(curLoc.x,curLoc.y);
?? ??? ?ctx.strokeStyle = "black";
?? ??? ?ctx.lineWidth = 10;
?? ??? ?ctx.stroke();
?? ??? ?lastLoc = curLoc;
?? ?}
?? ?
}
write.onmouseout = function(e){
?? ?e.preventDefault();
?? ?isMouseDown = false;

}?? ?
// 屏幕與畫布坐標(biāo)轉(zhuǎn)換
function winToCanvas(x,y){
?? ?var box = write.getBoundingClientRect();
?? ?return {x:Math.round(x-box.left),y:Math.round(y-box.top)};
}
function drawGruid(){
?? ??? ?//大邊框
?? ??? ?ctx.save();
?? ??? ?ctx.strokeStyle = "red";
?? ??? ?ctx.beginPath();
?? ??? ?
?? ??? ?ctx.moveTo(0,0);
?? ??? ?ctx.lineTo(w,0);
?? ??? ?ctx.lineTo(w,h);
?? ??? ?ctx.lineTo(0,h);
?? ??? ?ctx.closePath();
?? ??? ?ctx.lineWidth = 10;
?? ??? ?ctx.stroke();
?? ??? ?//米字格
?? ??? ?ctx.beginPath();
?? ??? ?ctx.lineWidth=1;
?? ??? ?ctx.moveTo(0,0);
?? ??? ?ctx.lineTo(w,h);
?? ??? ?ctx.moveTo(w,0);
?? ??? ?ctx.lineTo(0,w);
?? ??? ?ctx.moveTo(0,h/2);
?? ??? ?ctx.lineTo(w,h/2)
?? ??? ?ctx.moveTo(w/2,0);
?? ??? ?ctx.lineTo(w/2,h)
?? ??? ?ctx.stroke();
?? ??? ?ctx.restore();?? ?
?? ?}

}
</script>
</html>