我正在尝试在画布上调整旋转的形状.我的问题是,当我调用渲染功能时,形状会根据形状角度开始"漂移".我怎么能阻止这个？
我做了一个简化的小提示来演示这个问题,当点击画布时,形状会长大,并且由于某种原因它会向上漂移.
这是小提琴:https://jsfiddle.net/x5gxo1p7/
<style>
canvas {
position: absolute;
box-sizing: border-box;
border: 1px solid red;
}
</style>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
canvas.width = 300;
canvas.height= 150;
var ctx = canvas.getContext('2d');
var counter = 0;
var shape = {
top: 120,
left: 120,
width: 120,
height: 60,
rotation: Math.PI / 180 * 15
};
function draw() {
var h2 = shape.height / 2;
var w2 = shape.width / 2;
var x …