canvas实现绘画

Posted 2020-08-09 晨落梦公子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas实现绘画相关的知识，希望对你有一定的参考价值。

 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

以上是关于canvas实现绘画的主要内容，如果未能解决你的问题，请参考以下文章

canvas入门，一篇博文带你学会用代码绘画，直击实战案例！

使用vue学习three.js之加载和使用纹理-使用canvas画布上的绘画作为纹理渲染到方块上，使用动态绘画纹理

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段

html5- canvas(绘画形状）

利用canvas绘画二级树形结构图