Question

如何在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是一些形象。

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

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

Answer 1

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

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

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

您可以在此处找到一些信息：MDN Draw image documentation

Answer 2

如果要缩放，则必须记住用于定位的坐标也将按比例放大，因此如果缩放的因子为4，则坐标将为200 * 4而不是200。要单独缩放图像，您可以使用调用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像素。

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

2 个答案: