html5之canvas畫圖 1.寫字板功能
阿新 • • 發佈：2017-08-12
load har line client ctype 監聽事件 tle ntb csdn
寫字板事例：
寫字板分析：1.點擊鼠標開始寫字（onmosedown）2.按下鼠標寫字（onmousemove）3.松開鼠標，停下寫字（撤銷onmousemove事件）：
代碼:
<strong><!doctype html>
</strong><html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#canvas {
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">當前瀏覽器不支持canvas</canvas>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="arrow.js"></script>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
/*var mouse=utils.captureMousePosition(canvas); */
//加入mousedown監聽事件。在用戶鼠標按下後開始畫線。並註冊mousemove事件
canvas.addEventListener("mousedown",function(event){
context.beginPath();
context.moveTo(event.clientX, event.clientY);
//alert("-------------")
canvas.addEventListener("mousemove",onMouseMove,false);
},false);
//在鼠標移動時劃線
function onMouseMove(event){
context.lineTo(event.clientX,event.clientY);
context.stroke();
}
//在鼠標按鍵松開後，註銷鼠標移動事件
canvas.addEventListener("mouseup",function(event){
canvas.removeEventListener("mousemove",onMouseMove,false);
},false);
}
</script>
</body>
</html>
html5之canvas畫圖 1.寫字板功能