是否可以更改画布的位置而不是重绘图片?

时间:2016-06-03 11:24:18

标签: javascript html html5 canvas move

假设我想将我的图像的X坐标向右移动2。

而不是:

drawImage(image1, x1, y1, imageWidth1, imageHeight1);
drawImage(image2, x2, y2, imageWidth2, imageHeight2);

ctx.clearRect(0, 0, c.width, c.height);

drawImage(image1, x1 + 2, y1, imageWidth1, imageHeight1);
drawImage(image2, x2 + 2, y2, imageWidth2, imageHeight2);

是否可以做这样的事情?

drawImage(image1, x1, y1, imageWidth1, imageHeight1);
drawImage(image2, x2, y2, imageWidth2, imageHeight2);
moveCanvas(2, 0); //This moves the canvas entirely +2 to the right
                  //without the need of redrawing

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Title</title>
    </head>
    <body>
        <canvas id = "canvas"
        style="z-index: 1;
        position:absolute;
        left:0px;
        top:0px">
        </canvas>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

嗯......您可以移动放置画布的容器,并获得相同的结果