1

如何在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是一些图像。

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

有人可以帮我吗？我将不胜感激......

4

2 回答 2

0

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

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

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

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

于 2012-10-16T08:14:38.067 回答
0

如果你正在缩放，你必须记住，你用来定位的坐标也会被放大，所以如果你按比例缩放，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);

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

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

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

于 2012-10-16T08:17:41.710 回答