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

前言

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

<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 属性：

<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 设置：

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

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