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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
详解参数传递四种形式
Jul 21 Javascript
一些实用性较高的js方法
Apr 19 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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创建PDF中文文档
2006/10/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
微信小程序实现图片上传
2019/05/23 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python  Django 母版和继承解析
2019/08/09 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
办公室主任竞聘演讲稿
2014/05/15 职场文书
保研导师推荐信
2015/03/25 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android