HTML <canvas> 标签width属性

  • <canvas>标签width属性定义和用法

    width属性指定<canvas>元素的宽度(以像素为单位)。
    提示:使用height属性指定<canvas>元素的搞度(以像素为单位)。
    提示:每次重新设置画布的高度或宽度时,都会清除画布内容(请参阅页面底部的示例)。
    提示:了解有关HTML Canvas教程<canvas>元素的更多信息 。

  • <canvas>标签width属性浏览器支持

    Edge/IE Chrome FireFox Safari Opera
    9.0(含)以上 4.0(含)以上 2.0(含)以上 3.1(含)以上 9.0(含)以上
  • <canvas>标签width属性语法

    <canvas width="pixels">

  • <canvas>标签width属性实例

    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid">
    您的浏览器不支持HTML5 canvas 标签。
    </canvas>
    
    <script>
    
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#92B901";
    ctx.fillRect(50, 50, 100, 100);
    
    </script>
    
    <p><strong>注意:</strong> 在IE8和更早的版本中不支持canvas标记。</p>
    
    </body>
    </html>
    
    尝试一下
  • HTML4.01和HTML5之间的差异

    <canvas>标签是HTML5中的新标签。

  • <canvas>标签width属性值

    属性值 描述
    pixels 指定画布的宽度(以像素为单位)。默认高度为“300”
  • 更多例子

    <!DOCTYPE html>
    <html>
    <body>
    
    <canvas id="myCanvas">你的浏览器不支持canvas标签。</canvas>
    <br>
    
    <script>
    
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#92B901";
    ctx.fillRect(50, 50, 100, 100);
    
    function clearCanvas() {
        c.height = 300;
    }
    
    </script>
    
    <button onclick="clearCanvas()">清除画布</button>
    
    </body>
    </html>
    
    尝试一下