关于 HTML5 中 CSS 设置 Canvas 画布的大小所遇到的问题

前言

在学习 HTML5 的 Canvas 标签时, 看了文档后, 自己写了一下, 发现遇到了一个问题。
当我想改变画布的的大小的时候, 通常想到的是通过 CSS 样式来改变, 如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#test-canvas {
width: 300px;
height: 300px;
background-color: #ccc;
}
</style>

<canvas id="test-canvas">
<p>你的浏览器不支持Canvas</p>
</canvas>

<script>
var canvas = document.getElementById("test-canvas");
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
// 绘制一个边长为100像素的张方形
ctx.strokeRect(0, 0, 100, 100);
</script>

但是结果始料不及!!!绘制出来是这样的:
图一
上面所绘制的明显不是一个正方形, 而是一个矩形。


本着一名当代大学生的探索精神,由果溯因。首先我想到的是 document.getElementById(“test-canvas”) 所获取到的是一个对象, 那么这个对象里面有什么呢?于是 console.dir() 了一下

1
2
var canvas = document.getElementById("test-canvas");
console.dir(canvas);

然后发现该对象中的两个属性
图二
也就是说 Canvas 的画布大小是 300 x 150, 而我自己定义的 CSS 样式大小是 300 x 300, Canvas 所绘制的图形会被拉伸。于是我又测量了一下:
图三图二
发现 Canvas 绘制的边长为 100 的正方形被拉伸到 100 x 200。 而之前 CSS 里面设定是 300 x 300, Canvas 画布默认大小为 300 x 150, 两者之间的高宽比就是 2 : 1, 所以正方形的高度被拉伸至 100 x 2 = 200, 宽度被拉伸至 100 x 1 = 100, 于是便有了上面那个 100 x 200 的矩形。


那么也就是说 CSS 里面设置画布大小, 会导致画布按设定的值按比例缩放拉伸, CSS 里所设的大小只是设置画布在屏幕上显示的大小


也就是说, CSS 里面设置的不是画布真实的大小, 所以要设置 Canvas 画布的大小, 那只有在 HTML 属性中, 或是使用 JavaScript DOM 操作进行设置。
设置 HTML 属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
#test-canvas {
background-color: #ccc;
}
</style>
<!--设置HTML属性-->
<canvas id="test-canvas" width="300" height="300">
<p>你的浏览器不支持Canvas</p>
</canvas>
<script>
var canvas = document.getElementById("test-canvas");
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
// 绘制一个边长为100像素的张方形
ctx.strokeRect(0, 0, 100, 100);
</script>

图4
JavaScript 设置:

1
2
3
4
5
6
7
var canvas = document.getElementById("test-canvas");
// 设置其对象属性
canvas.width = 200;
canvas.height = 200;
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
ctx.strokeRect(0, 0, 100, 100);

图5


注: 以上所用截图工具, 屏幕尺子在我以前写的博客 我所收集的 Windows 系统下的神器 中的截图工具, 很强大!

------ 本文结束 ------

版权声明

Tflin's Blog by Tan Feng Lin is licensed under a Creative Commons BY-NC-ND 4.0 International License.
谭丰林创作并维护的Tflin's Blog博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于Tflin's Blog 博客( http://tflin.com ),版权所有,侵权必究。