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

2018-05-14

5 分钟读完 (大约 722 个字)

前言

在学习 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>

Your browser is out-of-date!

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