HTML5 Canvas将圆圈更改为正方形
[英]HTML5 Canvas change circle into square
问题描述
I would like to create a canvas that has a 100x100 pixel blue square on it. 
我想创建一个画布，上面有一个100x100像素的蓝色正方形。 Position the square along the left side of the page, 50 pixels from the top. 将正方形放在页面左侧，距顶部50像素。 Using javascript animate this square so that it moves 10 pixels right and 10 pixels down per second. 使用javascript动画此正方形，使其每秒向右移动10像素，向下移动10像素。 When the box hits or goes over an edge of the window, change the direction for the related axis. 当盒子碰到或越过窗口的边缘时，请更改相关轴的方向。
The following canvas return blue circle but I want 100X100px square instead of circle. 以下画布返回蓝色圆圈，但我想使用100X100px正方形而不是圆圈。 I tried rect(50, 50, 50, 50); 我尝试了rect(50, 50, 50, 50); but animation stopped working 但是动画停止工作
<style type="text/css">
canvas{
border-style: inset;
background-color: lightgray;
border-radius: 5px;
}
</style>
</head>
<body style="background-color: gray;" onload="animate()">
<canvas id="bouncyBall" width="500" height="250">
</canvas>
<script type="text/javascript">
var animation;
var centerX = 50;
var centerY = 50;
var radius = 20;
var boardX = 500;
var boardY = 250;
var ballDx = 2;
var ballDy = 2;
function drawBall() {
var content = document.getElementById("bouncyBall");
var me = content.getContext("2d");
me.clearRect(0,0,content.width,content.height);
centerX = centerX + ballDx;
centerY = centerY + ballDy;
me.beginPath();
me.arc(centerX,centerY,radius,0,Math.PI*2,false);
me.stroke();
me.fillStyle = "blue";
me.fill();;
me.stroke();
if (centerY > boardY - radius || centerY - radius < 0) {
ballDy = -1*ballDy;
}
if (centerX > boardX - radius || centerX < radius) {
ballDx = -1*ballDx;
}
}
function animate() {
clearInterval(animation);
setInterval(drawBall, 25);
}
</script>
</body>
2 个解决方案
解决方案1
1 已采纳 2018-09-28 12:45:25
var animation; var centerX = 50; var centerY = 50; var radius = 0; var boardX = 500; var boardY = 250; var ballDx = 2; var ballDy = 2; var width = 100; var height = 100; function drawBall() { var content = document.getElementById("bouncyBall"); var me = content.getContext("2d"); me.clearRect(0,0,content.width,content.height); centerX = centerX + ballDx; centerY = centerY + ballDy; me.beginPath(); me.rect(centerX,centerY,width,height); me.stroke(); me.fillStyle = "blue"; me.fill();; me.stroke(); if (centerY > boardY - width || centerY - radius < 0) { ballDy = -1*ballDy; } if (centerX > boardX - height || centerX < radius) { ballDx = -1*ballDx; } } function animate() { clearInterval(animation); setInterval(drawBall, 25); } animate();
canvas{ border-style: inset; background-color: lightgray; border-radius: 5px; }
<canvas id="bouncyBall" width="500" height="250"> </canvas>
解决方案2
1 2018-09-28 12:58:33
I'm using me.rect(centerX-radius, centerY-radius,2*radius,2*radius) . 我正在使用me.rect(centerX-radius, centerY-radius,2*radius,2*radius) 。 This way the center of your rect is in the same spot as the center of the circle.The width of your rect should br 2*radius. 这样，您的矩形的中心与圆的中心在同一点。矩形的宽度应为br 2 *半径。
//var animation; var centerX = 50; var centerY = 50; var radius = 20; var boardX = 500; var boardY = 250; var ballDx = 2; var ballDy = 2; function drawBall() { var content = document.getElementById("bouncyBall"); var me = content.getContext("2d"); me.clearRect(0,0,content.width,content.height); centerX = centerX + ballDx; centerY = centerY + ballDy; /* me.beginPath(); me.arc(centerX,centerY,radius,0,Math.PI*2,false); //me.stroke(); me.fillStyle = "blue"; me.fill(); me.stroke();*/ me.beginPath(); me.rect(centerX-radius, centerY-radius,2*radius,2*radius); me.fillStyle = "blue"; me.fill(); me.stroke(); if (centerY > boardY - radius || centerY - radius < 0) { ballDy = -1*ballDy; } if (centerX > boardX - radius || centerX < radius) { ballDx = -1*ballDx; } } function animate() { clearInterval(animate); setInterval(drawBall, 25); } animate()
canvas{ border-style: inset; background-color: lightgray; border-radius: 5px; }
<canvas id="bouncyBall" width="500" height="250"> </canvas>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.