如何使用HTML5画布绘制矩形-之路教程

在HTML5中使用<canvas>元素

CANVAS元素用于为网页创建本机交互性和动画

让我们绘制一个矩形

如我们知道的，Canvas元素始终与JavaScript一起使用，因为Canvas元素本身没有绘图功能。
所以我们必须使用JavaScript代码来绘制矩形。
在JavaScript函数中，我们必须创建两个变量

<script type="text/javascript">

    function rectangle() {

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

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

        canvas1.fillStyle = "rgba(100, 200, 0, 1)";

        canvas1.fillRect(30, 30, 75, 70);

    }

</script>

这些变量用于从JavaScript代码访问Canvas元素。
然后创建矩形对象并用颜色填充它。

因此，最终代码看起来像

<!DOCTYPE html>

<html>

<head>

<title>Example of canvas</title>

<script type="text/javascript">

    function rectangle() {

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

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

        canvas1.fillStyle = "rgba(100, 400, 0, 4)";

        canvas1.fillRect(0,0, 85, 80);

    }

</script>

</head>

<body onload="rectangle()">

<h1>Example of Canvas</h1>

<canvas id="cnv" width="200" height="800">

</canvas>

</body>

</html>

如何使用HTML5画布绘制矩形

日期：2020-04-11 23:04:05 来源：oir作者：oir

←如何在HTML5中定义MathML演示文稿

如何在HTML5中绘制自定义形状→

在HTML5中使用<canvas>元素

目录