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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
基于文本的搜索
2006/10/09 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
linux下安装easy_install的方法
2013/02/10 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
详解python配置虚拟环境
2019/04/08 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
什么是反射
2012/03/17 面试题
Java编程面试题
2016/04/04 面试题
大学生物业管理求职信
2013/10/24 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
个园导游词
2015/02/04 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
Python使用openpyxl模块处理Excel文件
2022/06/05 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android