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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
AngularJS实现多级下拉框
Mar 25 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中一个完整表单处理实现代码
2011/11/10 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
详解vue express启动数据服务
2017/07/05 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python打包可执行文件的方法详解
2016/09/19 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
python实现简单俄罗斯方块
2020/03/13 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
linux系统都有哪些运行级别
2016/03/26 面试题
总经理岗位职责
2013/11/09 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2014年预算员工作总结
2014/12/05 职场文书
新课程改革心得体会
2016/01/22 职场文书
合作意向书范本
2019/04/17 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
PHP正则表达式之RCEService回溯
2022/04/11 PHP