HTML5 画布 drawImage() 函数答案

【问题标题】：HTML5 canvas drawImage() functionHTML5 画布 drawImage() 函数
【发布时间】：2013-09-01 14:23:36
【问题描述】：

我正在尝试旋转地图。我在隐藏的画布上绘制地图，然后旋转以从另一个画布获取绘制画布。我实现了前三个步骤（绘制到隐藏、旋转、翻译），但我无法完成最后一个。你能帮帮我吗？这是我的源代码：

var visibleCanvas = document.getElementById("VisibleCanvas");
var visibleCtx = visibleCanvas.getContext("2d");
visibleCtx.translate(400,300);
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300,800,600);

c 是我隐藏的画布。我尝试了很多方法来绘制地图，但我无法做到。（如 dataURL 等）

【问题讨论】：

标签： html canvas drawimage

【解决方案1】：

以下是如何通过 180 度翻转从一个画布绘制到另一个画布

// save the visibleCtx in it's unrotated state
visibleCtx.save();

// rotate the visible canvas 180 degrees around its centerpoint
visibleCtx.translate(400,300);
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300);

// restore the state of visibleCtx to its unrotated state for future drawings
visibleCtx.restore()

这是代码和小提琴：http://jsfiddle.net/m1erickson/2scrB/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px;}
    #c{border:3px solid red;}
    #VisibleCanvas{border:3px solid green;}
</style>

<script>
$(function(){

    var c=document.getElementById("c");
    var cCtx=c.getContext("2d");

    var visibleCanvas = document.getElementById("VisibleCanvas");
    var visibleCtx = visibleCanvas.getContext("2d");

    var img=new Image();
    img.onload=function(){

        cCtx.drawImage(img,0,0);

        // note the image being rotated is 400x234
        // so our transformation point is 200x117
        visibleCtx.save()
        visibleCtx.translate(200,117);
        visibleCtx.rotate(Math.PI); 
        visibleCtx.drawImage(c,-200,-117);
        visibleCtx.restore();
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";


}); // end $(function(){});
</script>

</head>

<body>
    <p>Offscreen</p>
    <canvas id="c" width=400 height=234></canvas>
    <p>Visible</p>
    <canvas id="VisibleCanvas" width=400 height=234></canvas>
</body>
</html>

【讨论】：

感谢您的建议。但它不起作用。我正在尝试绘制隐藏的画布。所以我的代码中没有图像。可能是问题吗？
无论您使用上下文线/曲线/等绘制图像还是绘制地图，代码都是相同的（并且确实有效）。正如我的回答中所述...确保您使用 context.drawImage(c,-400,-300) - 假设您的屏幕外画布是 800x600。
我发现了问题。我有异步操作要在 hiddenCanvas 上绘制。所以我需要回调函数来旋转该画布。感谢所有帮助。祝你有美好的一天。

【解决方案2】：

如果我正确理解了这个问题，您希望：

在隐藏的画布上绘制地图；
旋转可见画布；和
将地图从隐藏画布复制到可见画布？

假设您的可见画布有 width=800 和 height=600 ...

var visibleCanvas = document.getElementById("VisibleCanvas");
var visibleCtx = visibleCanvas.getContext("2d");
visibleCtx.translate(400,300);
visibleCtx.rotate(Math.PI);

将画布坐标网格恢复到原来的位置

visibleCtx.translate(-400,-300);

drawImage 命令的格式为：

destinationContext.drawImage(sourceElement, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

... 因此 "visibleCtx.drawImage(c,-400,-300,800,600);"告诉画布使用坐标 (-400,-300) 复制源 - 它位于隐藏画布之外。

改用这个：

visibleCtx.drawImage(c,0,0,800,600);

由于可见画布坐标系原点已设置回左上角，并且您不想调整复制图像的大小，因此无需担心目标值。

【讨论】：

是的，您完全理解正确的事情。感谢您的建议。我将它们实现到我的代码中，但它没有再次起作用。我忽略了其他任何事情吗？