关于 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>


Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×