Question

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

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等）

Answer 1

如果我正确理解了这个问题，你想：

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

假设您的可见画布宽度= 800且高度= 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）;

...因此＆＃34; visibleCtx.drawImage（c，-400，-300,800,600）;＆＃34;告诉画布使用坐标（-400，-300）复制源 - 它位于隐藏画布之外。

相反，请使用：

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

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

Answer 2

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

enter image description here

// 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>

HTML5 canvas drawImage（）函数

2 个答案: