Question

我有一个canvas对象，我想为Web应用程序添加一个图像。我可以加载图像，但我遇到了两个问题：图像不会延伸到画布，并且画布不会延伸到任何浏览器中的整个div，而是Firefox。

var canvas = $("#imageView");
var context = canvas.get(0).getContext("2d");

$(document).ready(drawImage());
$(window).resize(refreshCanvas());

refreshCanvas();

function refreshCanvas() {
    //canvas/context resize
    canvas.attr("width", $(window).get(0).innerWidth / 2);
    canvas.attr("height", $(window).get(0).innerHeight / 2);
    drawImage();
};

function drawImage() {
    //shadow
    context.shadowBlur = 20;
    context.shadowColor = "rgb(0,0,0)";

    //image
    var image = new Image();
    image.src = "http://www.netstate.com/states/maps/images/ca_outline.gif";
    $(image).load(function () {
        image.height = canvas.height();
        image.width = canvas.width();
        context.drawImage(image);
    });
};

是否有使画布响应的解决方案？或者我只需要将画布和图像锁定到预定义的尺寸？

Answer 1

图片的

width和height是只读的，因此不起作用。

尝试改为：

 context.drawImage(image, 0, 0, canvas.width, canvas.height);

这将绘制与画布相同尺寸的图像（每次btw都不需要重新加载图像。 - 只需将其加载一次全局并重用image变量。）

Answer 2

<canvas id="imageView" width="1000" height="1000" style="width:100%; height:100%"></canvas>

可以使用CSS和高度和宽度属性，并且不需要在大小上达成一致。 CSS样式将决定显示的大小，您要求可以拉伸的画布。宽度和高度控制画布用于绘制的像素数。

例如，这将被缩放为10比1，并且通过抗锯齿滚动，此画布中的绘图将像丝绸一样光滑。

<canvas id="imageView" width="1000" height="1000" style="width:100px; height:100px"></canvas>

如果不使用CSS，它们的默认值将是canvas元素的width和height属性。

使Html5 Canvas及其包含的图像在浏览器中响应

2 个答案: