因此,我对画布旋转进行了一些研究,并发现了一种旋转单个对象的好方法。(来源)当我正在重写代码时,我正处于了解代码如何工作的过程中,遇到了这个奇怪的事情。
这是链接中的JSFiddle:
var canvas = document.getElementById('test_canvas');
var ctx = canvas.getContext('2d');
var buffer = document.createElement('canvas');
buffer.width = buffer.height = 60;
var bctx = buffer.getContext('2d');
bctx.translate(30, 30);
bctx.rotate(0.5);
bctx.fillStyle = 'rgb(255, 0, 0)';
bctx.fillRect(-15, -15, 30, 30);
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(30, 30, 30, 30);
ctx.drawImage(buffer, 50, 50);
这是我的 JSFiddle:
var myCanvas = document.getElementById("buffer");
var context = myCanvas.getContext('2d');
var myCanvas1 = document.createElement('canvas');
myCanvas1.width = myCanvas1.height = 60;
var newContext = myCanvas1.getContext('2d');
newContext.translate(30, 30);
newContext.rotate(0.5);
newContext.fillStyle = 'rgb(255, 0, 0)';
newContext.fillRect(-15, -15, 30, 30);
context.fillStyle = 'rgb(0, 255, 0)';
context.fillRect(30, 30, 30, 30);
context.drawImage(buffer, 50, 50);
除了我的代码不旋转对象之外,它们几乎是彼此的完全相同的副本。我困惑地看了这个代码几个小时,我真的很想知道其他人做对了什么。