您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“html5如何實(shí)現(xiàn)canvas滑動(dòng)驗(yàn)正效果”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“html5如何實(shí)現(xiàn)canvas滑動(dòng)驗(yàn)正效果”吧!
頁(yè)面布局
<canvas id="canva" width="500px" height="300px"></canvas>
樣式:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#canva{
background: indianred;
}
</style>
JS:
<script type="text/javascript">
window.onload=function(){
var canva=document.getElementById('canva');
var ctx =canva.getContext('2d');
var h=canva.height;
var w=canva.width;
var rext={ //定義驗(yàn)證塊的屬性
x:Math.random()*(w-50),
y:Math.random()*(h-50),
}
var hk={ //滑塊屬性
x:'0',
y:''
}
Rect(); //繪制驗(yàn)證塊
Hk(0,rext.y); //繪制滑塊
canva.addEventListener('click',function(){
var ev=ev||event;
var x=ev.clientX;
var y=ev.clientY;
if(x>=0 && x<=50 && y>=rext.y && y<=rext.y+50 ){//canvas內(nèi)部監(jiān)聽(tīng)
canva.addEventListener('mousemove',function(ev){
ev=ev||event;
ctx.clearRect(hk.x,hk.y,50,50); //清除滑塊
hk.x=ev.clientX;
Hk(hk.x,rext.y);
//繪制滑塊
var hk_x=ev.clientX;
var yz_x=rext.x;
(function(x,y){
if(x>y && x<y+50){
console.log("驗(yàn)證成功");
}
})(hk_x,yz_x) //判斷驗(yàn)證的匿名函數(shù)
})
}
}) //點(diǎn)擊事件的處理
function Rect(){
ctx.fillStyle='whitesmoke';
ctx.fillRect(rext.x,rext.y,50,50);
}
function Hk(x,y){
hk.x=x;
hk.y=y;
ctx.fillRect(hk.x,hk.y,50,50);
}
}
</script>
到此,相信大家對(duì)“html5如何實(shí)現(xiàn)canvas滑動(dòng)驗(yàn)正效果”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。