0

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

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

4

2 回答 2

0

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

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

假设您的可见画布有 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);

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

于 2013-08-29T09:40:14.763 回答
0

这是通过 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>
于 2013-08-29T14:53:04.503 回答