canvas实现探照灯效果


Posted in Javascript onFebruary 07, 2017

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

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

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
javascript数据类型详解
Feb 07 #Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 #Javascript
vuejs指令详解
Feb 07 #Javascript
fullCalendar中文API官方文档
Feb 07 #Javascript
JS常用倒计时代码实例总结
Feb 07 #Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 #Javascript
javascript验证香港身份证的格式或真实性
Feb 07 #Javascript
You might like
国内php原创论坛
2006/10/09 PHP
escape unescape的php下的实现方法
2007/04/27 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Python中函数的用法实例教程
2014/09/08 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
python 模拟登陆github的示例
2020/12/04 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
SQL语言面试题
2013/08/27 面试题
蓬莱阁导游词
2015/02/04 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记