首页 > 代码库 > canvas实现绘画
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>
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 })();
canvas实现绘画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。