如何将图像添加到画布，并将旋转的文本放在它上面？

Question

我试图让画布工作，我正在尝试做的是制作一个图像（来自现有图像）并在其上放置文字。我希望文本在图像的左侧旋转。我试图旋转文本的那一刻，我在画布上看不到它了。我使用以下解决方案：

var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.save();
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
ctx.restore();
var image = canvas.toDataURL("image/jpeg");

使用此解决方案，我再也看不到文本了。当我删除旋转并将代码变为以下内容时，一切正常，图像被渲染并且文本在图像上呈现。

var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
var image = canvas.toDataURL("image/jpeg");

任何人都可以看到我犯的错误，或者有人能解决我的这个问题吗？

[编辑] 我已经让jsfiddle显示问题http://jsfiddle.net/7kzuN/4/

Answer 1

在旋转之前，您应始终设置旋转点。

将旋转点想象成一张纸上的铅笔尖。

旋转时，纸张将围绕铅笔尖旋转。

使用context.translate（x，y）设置旋转点。

要在图像的左侧旋转，您可以翻译如下内容：

// set the rotation point

ctx.translate(6,img.height/2);

这会将您的旋转点设置为偏离左侧和图像垂直中心6个像素。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/ANpPm/

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/houseIcon.png";
function start(){
    canvas.width=img.width;
    canvas.height=img.height;
    // draw the image
    ctx.drawImage(img,0,0);
    // save the unrotated context
    ctx.save();
    // set the rotation point with translate
    ctx.translate(6,img.height/2);
    // rotate by -90 degrees
    ctx.rotate(-0.5*Math.PI);
    // draw the copyright bar
    ctx.fillStyle="black";
    ctx.fillRect(-img.height/2,-6,img.height,14);
    ctx.font = "12px Arial";
    ctx.fillStyle = 'white';
    ctx.textBaseline = 'top';
    ctx.fillText("copyright", -img.height/2+5,-6);
    // restore the context to its unrotated state
    ctx.restore();
    // save the image+text to a dataURL
    var image = canvas.toDataURL("image/jpeg");

}