標籤：art track epo -- padding tracking ntb false als
寫字板案例：
寫字板分析：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.寫字板功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
