canvas探照灯效果的示例代码


Posted in HTML / CSS onNovember 30, 2018

canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)

也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复

canvas探照灯效果的示例代码

接下来使用clip()方法实现一个探照灯效果

</iframe>
<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);
    }//欢迎加入全栈开发交流圈一起学习交流:582735936
  
]//面向1-3年前端人员

}   //帮助突破技术瓶颈,提升思维能力
        }   
    }    
} 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();
    
}//欢迎加入全栈开发交流圈一起学习交流:582735936
  
]//面向1-3年前端人员

}   //帮助突破技术瓶颈,提升思维能力
    }

}
initial();
clearInterval(oTimer); function fnInterval(){ //更新运动状态
 update(); //渲染
 render();    
} var oTimer = setInterval(fnInterval,50); 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 #HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 #HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 #HTML / CSS
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php object转数组示例
2014/01/15 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
预防传染病方案
2014/06/14 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
小学班长竞选稿
2015/11/20 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫