HTML <canvas> 标签

  • <canvas>标签定义和用法

    <cavas>标签用于通过脚本(通常是JavaScript)动态绘制图形。
    <cavas>标签只是图形的容器,您必须使用脚本来实际绘制图形。

  • <canvas>浏览器支持

    Internet Explorer/Edge Chrome FireFox Safari Opera
    9.0(含)以上支持 4.0(含)以上支持 2.0(含)以上支持 3.1(含)以上支持 9.0(含)以上支持
  • <canvas>实例

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

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

  • <canvas>提示和注意事项

    注意: <canvas>元素中的任何文本都将显示在不支持<canvas>的浏览器中。
    提示:了解有关HTML Canvas教程中<canvas>元素的更多信息 。
    提示:有关可与canvas对象一起使用的所有属性和方法的完整参考,请转到我们的 HTML 画布参考

  • <canvas>属性值

    属性名 属性值 描述
    height pixels 指定画布的高度
    width pixels 指定画布的宽度
  • <canvas>全局属性

    <canvas>标签还支持全局属性。

    查看有关全局属性的更多知识。

  • <canvas>事件属性

    <canvas>标签还支持事件属性。

    查看有关事件属性的更多知识。

  • <canvas>默认CSS设置

    canvas { 
        height: 150px;
        width: 300px;
    }