canvas特效代码详解（2）

最新推荐文章于 2024-06-07 23:26:45 发布

diemengxia1380

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量115

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/flyingLcode/p/7731908.html

版权

canvas是一个就基于像素的画图h5元素。

利用canvas做一个如下描述所示的动态图形：当鼠标点下去时开始绘图，在鼠标结束时完成一个矩形，当再一次点击时重复第一次的绘图步骤。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             canvas{
 8                 border: 1px solid #000;
 9             }
10         </style>
11     </head>
12     <body>
13         <canvas id="canvas" width="400" height="400"></canvas>
14         <script type="text/javascript">
15             var canvas = document.getElementById("canvas");
16             var context = canvas.getContext("2d");
17 //            当鼠标点击时执行的函数
18             canvas.οnmοusedοwn=()=>{
19 //                得到鼠标在canvas上的位置
20                 var x = event.clientX - canvas.offsetLeft;
21                 var y = event.clientY - canvas.offsetTop;
22                 var x1 = 0;
23                 var y1 = 0;
24 //                当鼠标移动时
25                 document.onmousemove = () =>{
26 //                    清除原来的矩形
27                     context.clearRect(0,0,canvas.width,canvas.height);
28 //                    得到鼠标绘制结束时矩形的位置
29                     x1 = event.clientX - canvas.offsetLeft;
30                     y1 = event.clientY - canvas.offsetTop;
31 //                    鼠标完成绘制时的矩形的宽和高
32                     context.strokeRect(x,y,(x1-x),(y1-y));
33                 }
34 //                鼠标离开后
35                 document.onmouseup = ()=>{
36                     document.onmousemove = null;
37                     document.ommousedown = null;
38                 }
39             }            
40         </script>
41     </body>
42 </html>

效果图，可在规定的矩形内绘制任何宽高的矩形

转载于:https://www.cnblogs.com/flyingLcode/p/7731908.html

diemengxia1380

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas特效代码详解（2）

canvas是一个就基于像素的画图h5元素。利用canvas做一个如下描述所示的动态图形：当鼠标点下去时开始绘图，在鼠标结束时完成一个矩形，当再一次点击时重复第一次的绘图步骤。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"...
复制链接

扫一扫