canvas实现绘画

html代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         #myCanvas {
13             background: #abcdef;
14         }
15     </style>
16 </head>
17 <body>
18 <canvas id="myCanvas" width="550px" height="400px"></canvas>
19 <script src="main.js"></script>
20 </body>
21 </html>

View Code

js代码：

 1 (function () {
 2 
 3     var c = document.getElementById("myCanvas");
 4     var con = c.getContext("2d");
 5 
 6     c.onmousedown = function (e) {
 7         c.onmousemove = function (e) {
 8             con.beginPath();
 9             con.arc(e.pageX, e.pageY, 5, 0, 2 * Math.PI);
10             con.fillStyle = "white";
11             con.fill();
12             con.closePath();
13         };
14         c.onmouseup = function (e) {
15             c.onmousemove = "";
16         }
17 
18     }
19 
20 })();

View Code