canvas特效代码详解（2）

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

canvas特效代码详解（2）相关推荐

android生命周期_Android开发 View的生命周期结合代码详解
咱们以TextView控件为例: /** * Created by SunshineBoy on 2020/9/23. */ public class TestTextView extends and ...
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉 ...
自定义View之Canvas(画布)的详解
接下来学习一下自定义View之Canvas(画布)的详解先来看看Canvas常用方法: 功能分类 Canvas常用方法备注绘制颜色 drawARGB 通过设置ARGB值绘制颜色 drawRGB ...
java canvas详解_HTML5的canvas绘图技术详解
原标题:HTML5的canvas绘图技术详解本篇教程探讨了HTML5的canvas绘图技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < canvas ...
【CV】Pytorch一小时入门教程-代码详解
目录一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...
html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
js php base64,JavaScript实现Base64编码与解码的代码详解
本篇文章给大家分享的是jJavaScript实现Base64编码与解码的代码详解,内容挺不错的,希望可以帮助到有需要的朋友一.加密解密方法使用//1.加密 var str = '124中文内容'; ...
yii mysql 事务处理_Yii2中事务的使用实例代码详解
前言一般我们做业务逻辑,都不会仅仅关联一个数据表,所以,会面临事务问题. 数据库事务(Database Transaction) ,是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全 ...
canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解

canvas特效代码详解（2）

canvas特效代码详解（2）相关推荐

最新文章

热门文章