画布 ‹canvas›

Exisi 2020-06-08 14:05:15
Categories： Tags：

 

属性

说明

height

该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。

width

元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

示例

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

 

 

<body>

    <canvas id="canvas" width="300" height="300">

        抱歉，您的浏览器不支持 canvas 元素

        （这些内容将会在不支持<canvas>元素的浏览器或是禁用了 JavaScript 的浏览器内渲染并展现）

    </canvas>

    <script>

        var canvas = document.getElementById('canvas');

        var ctx = canvas.getContext('2d');

        ctx.fillStyle = 'green';

        ctx.fillRect(10, 10, 100, 100);

    </script>

</body>

 

</html>

 

浏览器运行结果如下：

 

 

来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas>

对话框 ‹dialog›
可伸缩矢量图形 ‹svg›