Fatal编程技术网
  • html/
  • HTML5画布drawImage（）函数

HTML5画布drawImage（）函数

html canvas

HTML5画布drawImage（）函数,html,canvas,drawimage,Html,Canvas,Drawimage,我正在尝试旋转地图。我在一个隐藏的画布上绘制地图，然后我旋转以从另一个画布获取绘制画布。 我执行了前三个步骤（绘制到隐藏、旋转、平移），但最后一个步骤我做不到。你能帮我吗？ 以下是我的源代码： var visibleCanvas = document.getElementById("VisibleCanvas"); var visibleCtx = visibleCanvas.getContext("2d"); visibleCtx.translate(400,300); visibleCtx.

我正在尝试旋转地图。我在一个隐藏的画布上绘制地图，然后我旋转以从另一个画布获取绘制画布。 我执行了前三个步骤（绘制到隐藏、旋转、平移），但最后一个步骤我做不到。你能帮我吗？ 以下是我的源代码：

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

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

  • 在隐藏的画布上绘制地图
  • 旋转可视画布；及
  • 是否将地图从隐藏画布复制到可见画布
    • 假设您的可视画布的宽度为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命令的格式为：

    drawImage（sourceElement、sourceX、sourceY、sourceWidth、sourceHeight、destX、destY、destWidth、destHeight）

    。。。因此，“visibleCtx.drawImage（c，-400，-300800600）；”告诉画布使用坐标（-400，-300）复制源，坐标位于隐藏画布之外

    相反，请使用以下命令：

    visibleCtx.drawImage(c,0,0,800,600);
    由于可视画布坐标系原点已设置回左上角，并且您不想调整复制图像的大小，因此不必担心目标值。

    下面介绍如何通过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()

    下面是代码和小提琴：

    
正文{背景色：象牙色；填充：10px；}
#c{边框：3px实心红色；}
#VisibleCanvas{边框：3px纯绿色；}
$（函数（）{
var c=document.getElementById（“c”）；
var cCtx=c.getContext（“2d”）；
var visibleCanvas=document.getElementById（“visibleCanvas”）；
var visibleCtx=visibleCanvas.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
cCtx.drawImage（img，0,0）；
//注意，正在旋转的图像是400x234
//所以我们的转换点是200x117
visibleCtx.save（）
visibleCtx.translate（200117）；
visibleCtx.rotate（数学PI）；
可视CTX.drawImage（c，-200，-117）；
visibleCtx.restore（）；
}
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";
}); // end$（函数（）{}）；
屏幕外
    
可见的
    是的，你完全理解正确的事情。谢谢你的建议。我将它们实现到我的代码中，但它不再起作用。我是否忽略了其他任何东西？谢谢你的建议。但它不起作用。我正在尝试绘制隐藏的画布。因此我的代码中没有图像。这可能是问题吗？代码是相同的（并且确实起作用）无论你是画一幅图像还是用上下文线/曲线/等等来画一幅地图，就像我在回答中提到的那样…确保你画了上下文。drawImage（c，-400，-300）--假设您的屏幕外画布是800x600。我发现了问题。我有异步操作要在hiddenCanvas上绘制。因此我需要回调函数来旋转该画布。感谢所有帮助。祝您愉快。 
    <!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>