动画效果之PC端移动端探照灯遮罩动画

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>遮罩动画</title></head><body><canvas id="canvas" width="400" height="300" style="border: 1px solid red;"></canvas><script type="text/javascript">var canvas = document.getElementById("canvas");var ctx = canvas.getContext('2d');var H = 400,W = 500;//定义圆的大小以及最初的位置var tempR = 100;var tempH = Math.floor(Math.random() * H);var tempW = Math.floor(Math.random() * W);//定义一个圆的对象,即到时候显示的区域,包括半径和初始显示位置var ball = {x: tempW,y: tempH,r: tempR}//上下两张图片var img1 = new Image();var img2 = new Image();img1.src = 'img/1.png';img2.src = 'img/2.png';function render() {//不加这句话也可以,我只是让效果明显一点canvas.height = H;ctx.save();ctx.beginPath();ctx.drawImage(img2, 0, 0)ctx.beginPath()ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);ctx.fillStyle = 'red';ctx.fill();ctx.clip();//由于使用了clip()，画布背景图片会出现在clip()区域内ctx.drawImage(img1, 0, 0)ctx.restore();}// render()setInterval(render, 50);//pc端移动canvas.onmousemove = function(e) {ball.x = e.offsetX;ball.y = e.offsetY;}// 手机端移动canvas.addEventListener('touchmove', function(e) {console.log(e.changedTouches[0].pageX)ball.x = e.changedTouches[0].pageX;ball.y = e.changedTouches[0].pageY;})</script></body>
</html>
<!--
遮罩动画自然有两个图片 ，遮罩图片和被遮罩图片，当然了还得有一个透过遮罩图片看
被遮罩图片的圆形（本次）；有几个需要注意的点；1，想要移动 圆形 看被遮罩图片就需要设置事件，但需要注意的是，需要不断刷新2，个人理解，圆形和被遮罩图片属于一个图片，就是说要变成一个整体，要和遮罩图片分开1，定义遮罩图片，被遮罩图片，圆的r,h,w2,在把作图的步骤放在函数内；分成两个部分，即每个部分分割开来 = 》beginPath；2.1；被遮罩图片2.2，遮罩图片和圆只显示圆覆盖的遮罩图片 = 》ctx.clip();3，不断刷新函数=》图片-->

动画效果之PC端移动端探照灯遮罩动画相关推荐

html动画效果代码模板,7款绚丽的jQuery/HTML5动画及源码
jQuery是一款非常流行的JavaScript框架,利用jQuery,我们可以制作简单的动画效果,但是结合HTML5,这样的动画效果就会变得更加出彩.本文分享了7款jQuery结合HTML5的动画以 ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
android 三维动画效果,9款令人惊叹的HTML5 3D动画应用
原标题:9款令人惊叹的HTML5 3D动画应用之前我们已经向大家分享了很多HTML5动画应用了,大部分都非常炫酷,也有一小部分是很实用的.今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3 ...
android图片gif动画效果,android中类似于gif 实现图片的动画效果
案例:实现gif动画效果,连续播放图片由于是转载的,也就没必要多说,直接上代码案例:在android中实现gif动态图片的效果: EarthAnimationActivity.java packa ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
android 颜色过渡动画效果,Android buttom textview 颜色平滑过渡的动画效果
1.TransitionDrawable.例如,在文件夹中绘制一个xml文件,你可以这样写: 然后,在你的xml的实际检视你都引用这个TransitionDrawable在android:backgr ...
android 布局变化动画效果,使用LayoutTransition实现布局变化时的动画
在3.0及以后只需要在XML中设置animateLayoutChanges="true"或者在Java代码中添加一个LayoutTransition对象即可实现任何ViewGrou ...
【幻灯片动画效果制作】Focusky教程 | 设置录音和动画同步
通过添加多媒体效果和动画效果,您的演示内容将会更加生动.丰富.Focusky(以下简称为"FS软件") 支持轻松设置录音和动画同步,让您的展示更精彩! 两种方法设置录音和动画同步, ...
html数字动画效果,原生JavaScript代码实现数字更新的动画效果
前言在很多数据统计类型网站的首页,经常会看到数据在动态的更新,而且会以动画的效果呈现. 今天这篇文章我们就来看看这个效果如何实现吧. 文中的代码已经放到github上了,感兴趣的同学可以自取.htt ...
wps手机版ppt动画效果_wps ppt中怎么插入进入的动画效果？
wps ppt中怎么插入进入的动画效果?方法其实很简单,今天小编给大家带来wps ppt中插入进入的动画效果的方法教程,有需要的朋友一起来看一下吧. 首先,在我们制作演示文稿时打开需要添加动画效果的 ...

动画效果之PC端移动端探照灯遮罩动画

动画效果之PC端移动端探照灯遮罩动画相关推荐

最新文章

热门文章

动画效果之PC端 移动端 探照灯遮罩动画

动画效果之PC端 移动端 探照灯遮罩动画相关推荐

最新文章

热门文章

动画效果之PC端移动端探照灯遮罩动画

动画效果之PC端移动端探照灯遮罩动画相关推荐