與Javascript的簡單畫布矩形交互
[英]Simple Canvas Rectangle Interaction with Javascript
問題描述
我正在嘗試自學Canvas標簽和Javascript交互的基礎知識。 在下面的代碼中，當我將鼠標懸停在“ onmouseover”上時，可以使矩形展開，但當“ onmouseout”懸停時，矩形不會收縮。
<!DOCTYPE html>
<html>
<head>
<script>
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var rectWidth = 100;
function clear() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0, 0, ctx.width, ctx.height);
}
function widenRect(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
clear();
ctx.fillStyle="#92B901";
ctx.fillRect(0,0,rectWidth,100);
if(rectWidth < 200){
rectWidth+=10;
}
requestAnimationFrame(widenRect);
}
function narrowRect(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
clear();
ctx.fillStyle="#92B901";
ctx.fillRect(0,0,rectWidth,100);
if(rectWidth > 100){
rectWidth-=10;
}
requestAnimationFrame(narrowRect);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" onmouseover="widenRect()" onmouseout="narrowRect()">
Your browser does not support the HTML5 canvas tag.
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#92B901";
ctx.fillRect(0,0,rectWidth,100);
</script>
</canvas>
</body>
</html>
任何幫助將不勝感激！
1 個解決方案
解決方案1
0 已采納 2013-11-15 19:51:45
我試過了，它起作用了。 首先，您需要將requestAnimationFrame調用置於if條件中，否則將陷入無窮循環。 另一方面，在收縮畫布時，您需要使用clearRect而不是fillRect。
<!DOCTYPE html>
<html>
<head>
<script>
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var rectWidth = 100;
function widenRect(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#92B901";
ctx.fillRect(0,0,rectWidth,100);
if(rectWidth <= 200){
rectWidth+=10;
requestAnimationFrame(widenRect);
}
}
function narrowRect(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#92B901";
ctx.clearRect(rectWidth,0,200 - rectWidth,100);
if(rectWidth > 100){
rectWidth-=10;
requestAnimationFrame(narrowRect);
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" onmouseover="widenRect()" onmouseout="narrowRect()">
Your browser does not support the HTML5 canvas tag.
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#92B901";
ctx.fillRect(0,0,rectWidth,100);
</script>
</canvas>
</body>
</html>
Canvas、javascript互動？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.