<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;">您的瀏覽器不支持canvas </canvas> <script type="text/javascript"> var c =document.querySelector('#myCanvas'); // 標識畫布并指明背景關系 var ctx = c.getContext('2d'); ctx.strokeStyle = '#000'; ctx.lineWidth = 3; c.onmousedown = function (ev){ ctx.beginPath(); ctx.moveTo(ev.clientX,ev.clientY) c.onmousemove = function (ev) { ctx.lineTo(ev.clientX,ev.clientY); ctx.stroke() } c.onmouseup = function () { c.onmousemove = null; } } </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106439.html
標籤：Html/Css
上一篇：css之純css實作流程導航效果