canvas探照灯效果的示例代码


Posted in HTML / CSS onNovember 30, 2018

canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)

也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复

canvas探照灯效果的示例代码

接下来使用clip()方法实现一个探照灯效果

</iframe>
<button id="btn">变换</button>
<button id="con">暂停</button>
<canvas id="canvas" width="400" height="290" style="border:1px solid black">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
<script> btn.onclick = function(){history.go();}
con.onclick = function(){ if(this.innerHTML == '暂停'){ this.innerHTML = '恢复';
        clearInterval(oTimer);
    }else{ this.innerHTML = '暂停'; 
        oTimer = setInterval(fnInterval,50);
    }
} var canvas = document.getElementById('canvas'); //存储画布宽高
var H=290,W=400; //存储探照灯
var ball = {}; //存储照片
var IMG; //存储照片地址
var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; function initial(){ if(canvas.getContext){ var cxt = canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); var tempX = Math.floor(Math.random()*(W-tempR) + tempR); var tempY = Math.floor(Math.random()*(H-tempR) + tempR)        
        ball = {
            x:tempX,
            y:tempY,
            r:tempR,
            stepX:Math.floor(Math.random() * 21 -10),
            stepY:Math.floor(Math.random() * 21 -10)
        };
        IMG = document.createElement('img');
        IMG.src=URL;
        IMG.onload = function(){
            cxt.drawImage(IMG,0,0);
    }//欢迎加入全栈开发交流圈一起学习交流:582735936
  
]//面向1-3年前端人员

}   //帮助突破技术瓶颈,提升思维能力
        }   
    }    
} function update(){
    ball.x += ball.stepX;
    ball.y += ball.stepY; 
    bumpTest(ball);
} function bumpTest(ele){ //左侧
    if(ele.x <= ele.r){
        ele.x = ele.r;
        ele.stepX = -ele.stepX;
    } //右侧
    if(ele.x >= W - ele.r){
        ele.x = W - ele.r;
        ele.stepX = -ele.stepX;
    } //上侧
    if(ele.y <= ele.r){
        ele.y = ele.r;
        ele.stepY = -ele.stepY;
    } //下侧
    if(ele.y >= H - ele.r){
        ele.y = H - ele.r;
        ele.stepY = -ele.stepY;
    }
} function render(){ //重置画布高度,达到清空画布的效果
 canvas.height = H; if(canvas.getContext){ var cxt = canvas.getContext('2d');
        cxt.save(); //将画布背景涂黑
 cxt.beginPath();
        cxt.fillStyle = '#000';
        cxt.fillRect(0,0,W,H); //渲染探照灯
 cxt.beginPath();
        cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
        cxt.fillStyle = '#000';
        cxt.fill(); 
        cxt.clip(); //由于使用了clip(),画布背景图片会出现在clip()区域内
 cxt.drawImage(IMG,0,0);
        cxt.restore();
    
}//欢迎加入全栈开发交流圈一起学习交流:582735936
  
]//面向1-3年前端人员

}   //帮助突破技术瓶颈,提升思维能力
    }

}
initial();
clearInterval(oTimer); function fnInterval(){ //更新运动状态
 update(); //渲染
 render();    
} var oTimer = setInterval(fnInterval,50); 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
box-shadow单边阴影的实现
May 21 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 #HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 #HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 #HTML / CSS
You might like
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php实现微信支付之企业付款
2018/05/30 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
大学生收银员求职信分享
2014/01/02 职场文书
高三生物教学反思
2014/01/25 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
拓展策划方案
2014/06/03 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
MySQL批量更新不同表中的数据
2022/05/11 MySQL