0
以下のコードを実行すると、y値がコンソールで期待通りに増加していることがわかります。しかし、キャンバス上の円は、予想どおりy軸に沿って移動していません。誰にも何の理由がありますか？キャンバスアニメーションが意図したとおりに動作しない
render()関数までスクロールすると、y += 5;でyが増えていることがわかります。
'use strict';
(function() {
const canvas = document.getElementsByClassName('canvas')[0],
c = canvas.getContext('2d');
// Circle
var circleRadius = 50,
x = (canvas.width/2) - circleRadius, // inital x position of the ball
y = (canvas.height/2) - circleRadius, // inital y position of the ball
segments = 4,
bezieCircleFormula = (4/3)*Math.tan(Math.PI/(2*segments)), // http://stackoverflow.com/a/27863181/2040509
pointOffset = {
positive: bezieCircleFormula*circleRadius,
negative: circleRadius-(bezieCircleFormula*circleRadius)
},
// Each side has 3 points, bezier 1, circle point, bezier 2
// These are listed below in clockwise order.
// So top has: left bezier, circle point, right bezier
// Right has: top bezier, circle point, bottom bezier
circlePoints = {
top: [
[x+pointOffset.negative, y],
[x+circleRadius, y],
[x+pointOffset.positive+circleRadius, y]
],
right: [
[x+circleRadius*2, y+pointOffset.negative],
[x+circleRadius*2, y+circleRadius],
[x+circleRadius*2, y+pointOffset.positive+circleRadius]
],
bottom: [
[x+pointOffset.positive+circleRadius, y+circleRadius*2],
[x+circleRadius, y+circleRadius*2],
[x+pointOffset.negative, y+circleRadius*2]
],
left: [
[x, y+pointOffset.positive+circleRadius],
[x, y+circleRadius],
[x, y+pointOffset.negative]
]
};
// For `side` you can pass `top`, `right`, `bottom`, `left`
// For `amount` use an interger
function squish (side, squishAmount) {
for (let i = 0; i < circlePoints[side].length; i++) {
if (side === 'top') {
circlePoints[side][i][1] += squishAmount;
} else if (side === 'right') {
circlePoints[side][i][0] -= squishAmount;
} else if (side === 'bottom') {
circlePoints[side][i][1] -= squishAmount;
} else if (side === 'left') {
circlePoints[side][i][0] += squishAmount;
}
}
}
function render() {
// Clear the canvas
c.clearRect(0, 0, canvas.width, canvas.height);
// Draw a circle using bezier curves
c.beginPath();
c.moveTo(circlePoints.left[1][0], circlePoints.left[1][1]);
c.bezierCurveTo(circlePoints.left[2][0], circlePoints.left[2][1], circlePoints.top[0][0], circlePoints.top[0][1], circlePoints.top[1][0], circlePoints.top[1][1]);
c.bezierCurveTo(circlePoints.top[2][0], circlePoints.top[2][1], circlePoints.right[0][0], circlePoints.right[0][1], circlePoints.right[1][0], circlePoints.right[1][1]);
c.bezierCurveTo(circlePoints.right[2][0], circlePoints.right[2][1], circlePoints.bottom[0][0], circlePoints.bottom[0][1], circlePoints.bottom[1][0], circlePoints.bottom[1][1]);
c.bezierCurveTo(circlePoints.bottom[2][0], circlePoints.bottom[2][1], circlePoints.left[0][0], circlePoints.left[0][1], circlePoints.left[1][0], circlePoints.left[1][1]);
c.stroke();
c.closePath();
// Doing this for animation
y += 5;
console.log(y);
requestAnimationFrame(render);
}
render();
})();<canvas class="canvas" width="200" height="200"></canvas>
右！ヘッドアップのおかげで、私は本当に明白な何かを逃したことを知っていた。 – MarioD
ようこそ。問題の原因となる可能性のあるすべての変数の値をログに記録することをお勧めします（あなたの場合は、円の描画に直接影響する変数）。時間内にそのエラーを検出したとします。 – Shomz