html5 <canvas> 中的缩放徽标？答案

【问题标题】：scaling logo in html5 <canvas>?html5 <canvas> 中的缩放徽标？
【发布时间】：2014-12-31 13:11:50
【问题描述】：

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

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

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

【问题讨论】：

标签： html canvas

【解决方案1】：

实际上，您可以使用样式表调整画布的大小。结果可能因浏览器而异，因为 HTML5 仍处于最终确定的过程中。

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

context.scale(5, 1);

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

Mozilla 在scaling and transformations 上有一个很好的教程。

编辑：根据您的评论，徽标的大小和画布尺寸将决定放大图像的比例因子。如果徽标的大小为 100x100 像素且画布为 800x600，那么您会受到画布高度 (600) 的限制，因为它更小。因此，您可以在不剪裁画布外部分徽标的情况下进行的最大缩放为 600/100 = 6

context.scale(6, 6)

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

【讨论】：

【解决方案2】：

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

查看 Andreas Bovens 的presentation and examples。

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

【讨论】：