HTML5 Canvas如何實現事件感應

這篇文章主要介紹了HTML5 Canvas如何實現事件感應，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在實際的開發過程中，對于Canvas來說，某一區域的鼠標事件感應是一件非常重要而常見的需求，本節會提供一個感應事件的示例代碼。

在下面代碼中，我們對整個Canvas的click和mouseover事件進行了監聽，并在此事件執行時，產生響應觸發效果。

<canvas id="mycanvas" width="500" height="500" style="border:1px #000 solid;"

onclick="check(event);" onmouseover="check(event)"

onmouseout="check(event)"></canvas>

<script type="text/javascript">

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

ctx.fillStyle="blue";

ctx.fillRect(100,100,100,100); //設定感應區為(100,100)和(100,100)構成的矩形區域

function check(event){

console.log(event.clientX+"-"+event.clientY);

if((event.clientX>=100 && event.clientX<=200 && event.clientY>=100 &&

event.clientY<=200)){ //判定是否在感應區中

ctx.clearRect(0,0,500,500);

ctx.fillStyle="rgba(100,100,100,0.5)";

ctx.shadowOffsetX = 10;

ctx.shadowOffsetY = 10;

ctx.shadowBlur = 5;

ctx.shadowColor = "rgba(0, 0, 0, 0.9)"; //陰影的顏色，透明度為0.9

ctx.fillRect(100,100,100,100);

}

else

{

ctx.fillStyle="blue";

ctx.fillRect(100,100,100,100); //設定感應區為(100,100)和(100,100)構成的矩形區域

}

}

</script>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML5 Canvas如何實現事件感應”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!