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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
VUE中使用MUI方法
Feb 12 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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的加密方式及原理
2012/06/14 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php表单处理操作
2017/11/16 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python3.4爬虫demo
2019/01/22 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
python3中编码获取网页的实例方法
2020/11/16 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
建龙钢铁面试总结
2014/04/15 面试题
承诺书的格式范文
2014/03/28 职场文书
报告会主持词
2014/04/02 职场文书
精神文明单位申报材料
2014/05/02 职场文书
毕业设计说明书
2014/05/07 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
个人总结与自我评价
2015/02/14 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python