HTML5
发布时间:2019-10-08 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了canvas探照灯效果的示例代码,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)
也可以在使用clip()方法前
通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复
接下来使用clip()方法实现一个探照灯效果
@H_
450_7@ btn
.onclick = function()
{history.go(
);}
con
.onclick = function()
{ if(thi
s.innerHTML == '暂停')
{ thi
s.innerHTML = '恢复';
clearInterval(oTimer
);
}else
{ thi
s.innerHTML = '暂停';
oTimer = se
Tinterval(fnInterval,50
);
}
} var canvas = document.getElementById('canvas'
); //存储画布宽高
var H=290,W=400; //存储探照灯
var ball =
{}; //存储照片
var IMG; //存储照片地址
var URL = '
http://sandbox.runj
s.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; function initial()
{ if(canva
s.getCo
ntext)
{ var cxt = canva
s.getCo
ntext('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
);
}//欢迎加入全栈开发交流圈一起学习交流:582735936
]//面向1-3
年前端人员
} //帮助突破技术瓶颈,提升思维能力
}
}
} function
update(){
bal
l.x += bal
l.stepX;
bal
l.y += bal
l.stepY;
bumpTest(ball
);
} function bumpTest(el
E){ //左侧
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()
{ //重置画布高度,达到清空画布的效果
canva
s.height = H; if(canva
s.getCo
ntext)
{ var cxt = canva
s.getCo
ntext('2d'
);
cxt.save(
); //将画布背景涂黑
cxt
.beginPath(
);
cxt.fillStyle = '#000';
cxt.fillRect(0,W,H
); //渲染探照灯
cxt
.beginPath(
);
cxt.arc(bal
l.x,bal
l.y,bal
l.r,2*Math.PI
);
cxt.fillStyle = '#000';
cxt.fill(
);
cxt.clip(
); //由于使用了clip(),画布背景图片
会出现在clip()区域内
cxt.drawImage(IMG,0
);
cxt.restore(
);
}//欢迎加入全栈开发交流圈一起学习交流:582735936
]//面向1-3
年前端人员
} //帮助突破技术瓶颈,提升思维能力
}
}
initial(
);
clearInterval(oTimer
); function fnInterval()
{ //更新运动状态
update(); //渲染
render(
);
} var oTimer = se
Tinterval(fnInterval,50
);
大佬总结
以上是大佬教程为你收集整理的canvas探照灯效果的示例代码全部内容,希望文章能够帮你解决canvas探照灯效果的示例代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。