画布在不同尺寸下表现异常答案

【问题标题】：Canvas behaves oddly at different sizes画布在不同尺寸下表现异常
【发布时间】：2014-07-18 11:27:35
【问题描述】：

最近一直在玩画布，但它在不同尺寸下的行为很奇怪。

这是我的代码：

HTML：<canvas></canvas>

CSS：canvas { width:300px; height:50px; }

JS：

var c = document.querySelector("canvas"),
    ctx = c.getContext("2d");

ctx.fillRect(10,10,50,50); // fill a 50x50 square at pos (10,10)

画布尺寸为 300x50，绘制如下：

在画布尺寸为 100x200 时，绘制如下：

很明显，一个像素实际上并不意味着一个像素 - 我做错了什么吗？

【问题讨论】：

【解决方案1】：

不要使用 CSS 来改变画布的大小。而是改变元素的大小：

c.width=300;
c.height=50;

这是因为当您使用 CSS 调整大小时，您正在“拉伸”像素。当您更改元素本身的大小时，实际上是在添加/减去像素。

【讨论】：