Question

无法扩展。将画布中的绘图编码为固定大小（即800x600）然后将其缩放到特定位置似乎是有意义的 - 但是大小调整发生在4个位置：1）在上下文定义中（即ctx.width = 800 2） ctx.scale; 3）在html中用

我可以使用ctx.scale（0.25,0.25）进行缩放并使用，但这似乎不正确 - 它似乎希望缩放比例。

css sizing只是让它变得模糊，所以不是一个好方法。有任何想法吗？

Answer 1

实际上，您可以使用样式表调整画布大小。由于HTML5仍处于最终确定阶段，因此浏览器的结果可能会有所不同。

绘图上下文没有width或height属性，仅适用于画布。上下文的scale用于调整x或y维度中的单位步长，并且不必成比例。例如，

context.scale(5, 1);

将x单位大小更改为5，将y更改为1.如果我们现在绘制30x30平方，实际上它将是150x30，因为x已缩放5倍而y 1}}保持不变。如果您希望徽标更大，请在>绘制徽标之前增加上下文比例。

一般来说，Mozilla有一个关于scaling and transformations的好教程。

修改：为了回应您的评论，徽标的大小和画布尺寸将决定放大图像的缩放系数。如果徽标的尺寸为100x100像素且画布为800x600，那么您将受到画布高度（600）的限制。因此，如果不在画布外部剪切徽标的一部分，您可以执行的最大缩放将是600/100 = 6

context.scale(6, 6)

这些数字会有所不同，您可以自行计算以找到最佳尺寸。

Answer 2

您可以将徽标转换为svg并让浏览器为您进行缩放，无论是否添加css mediaqueries。

查看Andreas Bovens的presentation and examples。

Answer 3

您可以在绘制图像时调整图像大小

imageobject=new Image();
imageobject.src="imagefile";
imageobject.onload=function(){
    context.drawImage(imageobject,0,0,imageobject.width,imageobject.height,0,0,800,600);
}

最后两个参数是宽度和调整图像大小的高度

http://www.w3.org/TR/html5/the-canvas-element.html#dom-context-2d-drawimage

Answer 4

如果设置element.style.width和element.style.height属性（假设元素是画布元素），则会拉伸画布的内容。如果您设置element.width和element.height，则表示您正在调整画布本身的大小而不是内容。每当您使用javascript绘制内容时，ctx.scale都会动态调整大小，并为您提供与element.style相同的拉伸效果。

在html5 <canvas>？</canvas>中缩放徽标

4 个答案: