canvas特效代码详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas特效代码详解相关的知识，希望对你有一定的参考价值。
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.onmousedown=()=>{ 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>
效果图，可在规定的矩形内绘制任何宽高的矩形
以上是关于canvas特效代码详解的主要内容，如果未能解决你的问题，请参考以下文章
Android自定义View实战教程5??---Canvas详解及代码绘制安卓机器人
自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一 ，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段