与Javascript的简单画布矩形交互
[英]Simple Canvas Rectangle Interaction with Javascript
问题描述
I am trying to teach myself the basics of the Canvas tag and Javascript interaction. 
我正在尝试自学Canvas标签和Javascript交互的基础知识。 In the following code, I can make the rectangle expand when I hover with "onmouseover", but it will not contract when "onmouseout". 在下面的代码中，当我将鼠标悬停在“ 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>
Any help will be appreciated! 任何帮助将不胜感激！
1 个解决方案
解决方案1
0 已采纳 2013-11-15 19:51:45
I tried this and it works. 我试过了，它起作用了。 First you need to put the requestAnimationFrame calls into the if condition because otherwise you will run into endless loops. 首先，您需要将requestAnimationFrame调用置于if条件中，否则将陷入无穷循环。 On the other hand when contracting the canvas you need to use clearRect instead of fillRect. 另一方面，在收缩画布时，您需要使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.