我正在阅读Nick Morgan 的Javascript for Kids，并生成了以下代码。
<!DOCTYPE html>
<html>
<head>
<title>Canvas Animation</title>
</head>
<body>
<canvas id ="canvas" width ="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
}
else {
ctx.stroke();
}
}
var drawBee = function (x, y) {
ctx.lineWidth = 2;
ctx.strokeStyle = "Black";
ctx.fillStyle = "Gold";
circle(x, y, 8, true);
circle(x, y, 8, false);
circle(x - 5, y - 11, 5, false);
circle(x + 5, y - 11, 5, false);
circle(x - 2, y - 1, 2, false);
circle(x + 2, y - 1, 2, false);
}
</script>
</body>
</html>
现在，我创建了一个函数circle来绘制一些圆，我希望在原始圆的中心上方创建两个带有黑色轮廓的圆，其值为 x 和 y。
如您所见，这些圈子有代码
circle(x - 5, y - 11, 5, false);
circle(x + 5, y - 11, 5, false);
但我认为相似于x轴，其中移动到正方向的权利x + 5，还以为移动了在正规模y轴是y + 11。
为什么是y - 11而不是y + 11？
因为 0,0 是左上角，所以加到y下降，减掉y上升。使用x,y符号：
0,0 1,0 2,0 3,0 4,0 0,1 1,1 2,1 3,1 4,1 0,2 1,2 2,2 3,2 4,2 0,3 1, 3 2,3 3,3 4,3 0,4 1,4 2,4 3,4 4,4
如果您添加到y向上，那么 0,0 将是左下角。
不，认为它可能位于左下角并不疯狂。我认为每个角都被某个坐标系用作 0,0 点。例如，默认情况下 0,0 是 PDF 中的左下角。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句