>我有一个画布对象,我想为Web应用程序放置一个图像。我可以加载图像,但我遇到了 2 个问题:图像不会拉伸到画布,并且画布不会拉伸以覆盖除 Firefox 以外的任何浏览器中的整个div。
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);
});
};
有没有使画布响应的解决方案?还是我只需要将画布和图像锁定到预定义的大小?
的width
和height
是只读的,因此不起作用。
请尝试:
context.drawImage(image, 0, 0, canvas.width, canvas.height);
这将绘制与画布相同的尺寸的图像(顺便说一句,您不需要每次都重新加载图像 - 只需全局加载一次并重用image
变量。
<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,则其默认值将是画布元素的宽度和高度属性。