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 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
webpack 开发和生产并行设置的方法
Nov 08 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
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
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
图解javascript作用域链
2019/05/27 Javascript
详解Python中with语句的用法
2015/04/15 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
村庄绿化方案
2014/05/07 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
高中化学教学反思
2016/02/22 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL