HTML代码：<!DOCTYPE html>

<html>
 <head>
  <title> 在线画图</title>
  <meta charset="utf-8" />
<style>
　　#d{margin-left:30%;}
</style>
 </head>

 <body>
    <div id="d">
　　　　<canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>
　　</div>

</body>
</html>

JavaScript代码：

 1 <script>
 2         var canvas=document.getElementById("canvas");
 3         var ctx=canvas.getContext("2d");
 4         
 5         canvas.onmousedown=function(event){
 6             var x=event.clientX-canvas.offsetLeft;
 7             var y=event.clientY-canvas.offsetTop;
 8             ctx.beginPath();
 9             ctx.moveTo(x,y);
10 
11             document.onmousemove=function(event){
12             var x=event.clientX-canvas.offsetLeft;
13             var y=event.clientY-canvas.offsetTop;
14             ctx.lineTo(x,y);
15             ctx.strokeStyle="red";
16             ctx.stroke();
17             };
18         };
19         document.onmouseup=function(){
20             ctx.closePath();
21             document.onmousemove=null;
22         };
23     </script>

 

运行后：

 

版权声明：本文为--silence原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/--silence/p/4967624.html