如何在html5中缩放后显示部分画布答案

【问题标题】：how to display part of the canvas after scaling in html5如何在html5中缩放后显示部分画布
【发布时间】：2012-10-16 07:37:50
【问题描述】：

如何在html5中缩放后显示部分画布

例如：

var c =document.getElementById("mycanvas");
var canvas = c.getContext("2d");
canvas.scale(4,4);
    canvas.drawImage(img,0,0);
    canvas.drawImage(img,200,200);

img 是一些图像。

在这里我已经缩放了一些值，现在它显示画布的左上角区域（只有左上角的图像）但是如果我希望它显示右下角区域（只有右下角的图像) 或根据我给它的坐标。我该怎么做？

有人可以帮我解决这个问题吗？我将不胜感激.....

【问题讨论】：

标签： html canvas scaling

【解决方案1】：

如果你正在缩放，你必须记住，你用来定位的坐标也会被放大，所以如果你缩放了4，那么你的坐标将是200 * 4而不是@987654324 @。要单独缩放图像，您可以使用调用 drawImage(img,x,y,width,height) 并使用...

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var scale = 4;
var width = img.width * scale;
var height = img.height * scale;
ctx.drawImage(img, 0, 0, width, height);
ctx.drawImage(img, 200, 200, width, height);

或者您需要将坐标除以比例因子...

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var scale = 4;
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);
ctx.drawImage(img, 200 / scale, 200 / scale);

我整理了一个小提琴，展示了后一种方法，使用剪切来确保图像保持在其象限http://jsfiddle.net/ujtd2/

编辑使用状态堆栈可以避免必须自己进行转换。

var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var scale = 4;

// add a new item to the context state stack
ctx.save();
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);

// discard the previous state be restoring the last state
// back to normal scale
ctx.restore();

// Set translation
ctx.translate(200, 200);

// Repeat for second image
ctx.save();
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);

我现在跟着。要从特定坐标放大并显示场景的一部分，请使用 translate。

ctx.scale(4, 4);
ctx.translate(-200, -200);
ctx.drawImage(img, 0, 0);
ctx.drawImage(img, 200, 200);

这会放大 4 倍，然后通过将绘图坐标向上和向左平移 200 像素，将可见部分向下和向右移动 200 像素。

【讨论】：

感谢您的加入，但是如果画布上有很多图像，那么我必须绕过每个图像来缩放它们。不是用画布完成同样的事情（你用图像做的）吗？
我不太清楚你打算做什么，你得进一步解释一下
我有点想给我的动画带来缓慢的缩放效果。假设 2 个球正在相互靠近，我想在它们即将碰撞时慢慢放大（通过在每次迭代后慢慢放大），并考虑也需要缩放的背景图像。

【解决方案2】：

您可以通过以下方式使用drawImage：

drawImage(
    image,
    sourceX,
    sourceY,
    sourceWidth,
    sourceHeight,
    destinationX,
    destinationY,
    destinationWidth, 
    destinationHeight
 );

您确定所需的源区域，然后确定要将其放置在画布上的位置。

你可以在这里找到一些信息：MDN Draw image documentation

【讨论】：