Question

所以我做了一些关于画布旋转的研究，并且遇到了旋转单个对象的好方法。（Source）当我重写代码时，我正在理解代码的工作方式，遇到了这个奇怪的事情。

以下是链接中的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);

这里是my 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);

除了我的代码不旋转对象外，它们几乎是彼此的精确副本。我一直在看这段代码几个小时感到困惑，我真的很想知道其他人做对了什么。

Answer 1

你的问题在于这一行：

context.drawImage(buffer, 50, 50);

原始代码使用了一个名为buffer的变量，并为其分配了一个新的canvas元素：

var buffer = document.createElement('canvas');

你已经将你的名字命名为：

var myCanvas1 = document.createElement('canvas');

但稍后会将您的图片绘制为不存在的变量buffer

HTML5 Javascript Canvas Rotation JSFiddle将不会以相同的结果运行相同的代码

1 个答案: