JavaScriptとの単純なキャンバスの四角形の対話
-
20-12-2019 - |
質問
キャンバスタグと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>
.
任意の助けが高くなるでしょう!
解決
私はこれを試してみてうまくいきました。まず、requestAnimationFrame呼び出しをIF条件に入れる必要があります。一方、キャンバスを縮小するときは、FillRectの代わりにClearRectを使用する必要があります。
<!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>
. 所属していません StackOverflow