前言
在学习 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
2var 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>
JavaScript 设置:1
2
3
4
5
6
7var canvas = document.getElementById("test-canvas");
// 设置其对象属性
canvas.width = 200;
canvas.height = 200;
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
ctx.strokeRect(0, 0, 100, 100);
注: 以上所用截图工具, 屏幕尺子在我以前写的博客 我所收集的 Windows 系统下的神器 中的截图工具, 很强大!