使Html5画布及其包含的图像响应跨浏览器 [英] Make Html5 Canvas and Its contained image responsive across browsers
问题描述
我有一个画布对象,我想为Web应用程序放置一个图像。我可以得到的图像加载,但我遇到了2个问题:图像不会伸展到画布,并且画布不会伸展覆盖整个div在任何浏览器,但Firefox。
I have a canvas object that I want to put an image in for a web application. I can get the image loaded, but I've run into 2 problems: The image won't stretch to the canvas, and the canvas won't stretch to cover the entire div in any browser but 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);
});
};
是否有解决方案让画布响应?
Is there a solution to making the canvas responsive? Or do I just need to lock the canvas and image down to predefined sizes?
推荐答案
width code>和
height
是只读的,因此无法使用。
width
and height
of image are read-only so that won't work.
:
context.drawImage(image, 0, 0, canvas.width, canvas.height);
这将绘制与画布相同的尺寸的图像(您不需要重新加载image每次btw。 - 只需加载一次,并重用 image
变量。)
This will draw the image the same dimension as the canvas is (you don't need to reload the image every time btw. - just load it once globally and reuse the image
variable.)
这篇关于使Html5画布及其包含的图像响应跨浏览器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!