使Html5 Canvas及其包含的圖像在瀏覽器中響應

Question

我有一個canvas對象，我想為Web應用程序添加一個圖像。 我可以加載圖像，但我遇到了兩個問題：圖像不會延伸到畫布，並且畫布不會延伸到任何瀏覽器中的整個div，而是Firefox。

http://jsfiddle.net/LFJ59/1/

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屬性。