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>

canvas探照灯效果的更多相关文章

  1. CodePen 作品秀:Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  2. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  3. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  4. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  5. HTML5 Canvas时间效果

    Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...

  6. canvas可视化效果之内阴影效果

    canvas可视化效果之内阴影效果 楔子 在之前的一个轨道交通可视化项目中,运用到了很多绘制技巧. 可以参考 之前的一篇文章 <利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果> ...

  7. 2015.4.25-2015.5.1 字符串去重,比例圆设计,中奖机和canvas橡皮擦效果等

    1.字符串去重,html模板取值   2.javascript正则表达式之$1...$9   3.jquery插件   4.返回上一页并刷新 解决方法: <a href ="javas ...

  8. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  9. canvas 弹幕效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table 'portal.hibernate_sequence' doesn't exist, 谈谈主键自增的方式

    最近几天几天做项目用到了Spring Data JPA,确实是个好东西,省了很多力气.但是由于刚开始用,也遇到不少头疼的问题,如下,调用JpaRepository接口的save方法保存一个对象到数据库 ...

  2. 基于springmvc的hessian调用原理浅析

    一.客户端 1.构造(初始化) 由客户端的配置文件随容器的启动而进行初始化,配置文件如下: <?xml version="1.0" encoding="UTF-8& ...

  3. 在Jekyll博客添加评论系统:gitment篇

    最近在Github Pages上使用Jekyll搭建了个人博客( jacobpan3g.github.io/cn ), 当需要添加评论系统时,找了一下国内的几个第三方评论系统,如"多说&qu ...

  4. Spring和SpringMVC父子的容器之道---[上篇]

    Spring和SpringMVC作为Bean管理容器和MVC层的默认框架,已被众多WEB应用采用,而在实际开发中,由于有了强大的注解功能,很多基于XML的配置方式已经被替代,但在实际项目中,我们经常会 ...

  5. docker~为什么没人说说.dockerignore

    回到目录 最近一直专注于docker的开发之中,而在使用Dockerfile时发现有个问题,当你的发布目录只能是obj\Docker\publish,而指向其它目录dockefile并不认它,只有如何 ...

  6. Docker安装及基础使用

    Docker 安装 在 Mac OS X 系统中,首先你要下载安装包安装:Docker Toolbox 安装过程中,可以选择是否安装 Docker Machine,Docker Compose 等,默 ...

  7. 安卓平台使用pocketSphinx离线语音识别

    版权声明:本文为elecdog原创文章,可以转载,但必须在明确位置注明出处!谢谢合作. 关于语音识别,国内已经有比较好的公司推出相关的服务了,比如百度免费的离在线融合语音识别以及讯飞收费的在线和离线语 ...

  8. TCP/IP协议之ping和traceroute

    Ping程序就是调用的就是ICMP报文.利用的是ICMP的应答和回显请求.来看下具体的ping报文. Request的报文类型为8 Reply的类型为0 通过具体的ping报文可以看到ping报文的大 ...

  9. Multimodal —— 看图说话(Image Caption)任务的论文笔记(二)引入attention机制

    在上一篇博客中介绍的论文"Show and tell"所提出的NIC模型采用的是最"简单"的encoder-decoder框架,模型上没有什么新花样,使用CNN ...

  10. swift3.0 coreData的使用-日记本demo

    效果 需求分析 基于官方MasterDetail模板,官方写了很多复杂的coredata逻辑,在此基础上快速开发简单的日记本程序. - 主要功能:增.删.改.查 - 界面用默认的界面,将detail页 ...