介绍 & lt;/iframe>
& lt; button id=癰tn"祝辞变换& lt;/button>
& lt; button id=癱on"祝辞暂停& lt;/button>
& lt; canvas id=癱anvas",宽度=?00“,身高=?90“,风格=氨呔?1 px solid black"在当前浏览器不支持画布,请更换浏览器后再试& lt;/canvas>
& lt; script>, btn.onclick =,函数(){history.go ();}
con.onclick =, function(){,如果(this.innerHTML ==, & # 39;暂停& # 39;){=,,this.innerHTML & # 39;恢复& # 39;;
,,,,,,,clearInterval (oTimer);
其他,,,}{=,,this.innerHTML & # 39;暂停& # 39;,,
,,,,,,,oTimer =, setInterval (fnInterval, 50);
,,,}
},var canvas =, . getelementbyid(& # 39;帆布# 39;);,//存储画布宽高
var H=290 W=400;,//存储探照灯
var ball =,{},,//存储照片
var IMG,//存储照片地址
var URL =, & # 39; http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg& # 39;;, function 初始(){,如果(canvas.getContext) {, var cxt =, canvas.getContext (& # 39; 2 d # 39;);, 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 (& # 39; img # 39;);
,,,,,,,IMG.src=https://www.yisu.com/zixun/URL;
IMG。onload=function () {
cxt.drawImage (IMG, 0, 0);
}//欢迎加入全栈开发交流圈一起学习交流:582735936
)//面向1 - 3年前端人员
}//帮助突破技术瓶颈,提升思维能力
}
}
}函数update () {
球。x +=ball.stepX;
球。y +=ball.stepY;
bumpTest(球);
}函数bumpTest(避署){//左侧
如果(避署。x <=ele.r) {
避署。x=ele.r;
避署。stepX=-ele.stepX;
}//右侧
如果(避署。x>=W - ele.r) {
避署。x=W - ele.r;
避署。stepX=-ele.stepX;
}//上侧
如果(避署。y <=ele.r) {
避署。y=ele.r;
避署。stepY=-ele.stepY;
}//下侧
如果(避署。y>=H - ele.r) {
避署。y=H - ele.r;
避署。stepY=-ele.stepY;
}
}函数呈现(){//重置画布高度,达到清空画布的效果
画布。身高=H;如果(canvas.getContext) {var cxt=canvas.getContext (2 d);
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 ();//由于使用了剪辑(),画布背景图片会出现在剪辑()区域内
cxt.drawImage (IMG, 0, 0);
cxt.restore ();
}//欢迎加入全栈开发交流圈一起学习交流:582735936
)//面向1 - 3年前端人员
}//帮助突破技术瓶颈,提升思维能力
}
}
最初的();
clearInterval (oTimer);函数fnInterval(){//更新运动状态
update ();//渲染
呈现();
}var oTimer=setInterval (fnInterval, 50);
这期内容当中小编将会给大家带来有关使用帆布怎么实现一个探照灯效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
上述就是小编为大家分享的使用帆布怎么实现一个探照灯效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
