使用 JavaScript 处理 Canvas
HTML <canvas> 元素可用于在网页上创建和绘制图形。它可以在网页上绘制各种图形或形状,如线条、圆圈等,并为它们制作动画。
您可以在 HTML 中定义 <canvas> 元素,之后,您需要使用 JavaScript 在网页上绘制图形。让我们看看在 HTML 中定义 canvas 元素并使用 JavaScript 进行操作的语法。
语法
使用以下语法创建 HTML canvas 元素。
<canvas id="myCanvas" width="480" height="320">
Your browser does not support the HTML canvas tag.
</canvas>
在上面的语法中,我们定义了 id 为 'myCanvas' 的 HTML <canvas> 元素。当浏览器不支持 <canvas> 元素时,将显示写入 <canvas> 标记之间的消息。
我们使用 document 对象的 getElementById() 方法访问 canvas 元素。看看下面的语法 -
var canvas = document.getElementById('canvas_id');
var ctx = canvas.getContext('2d');
在 JavaScript 中,我们可以使用 getContext('2d') 方法来获取 2D 画布的上下文。接下来,我们可以使用各种方法绘制形状,并通过将 'ctx' 变量作为引用来填充颜色。
例子
示例:绘制矩形
在下面的代码中,我们在 HTML 中添加了 <canvas> 元素。
在 JavaScript 中,我们使用 getContext('2d') 方法来访问画布的上下文。之后,我们使用 fillstyle() 方法为画布中的元素着色。fillRect() 方法用于绘制矩形。它采用画布中 4 个角的坐标。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing Rectangle on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// 获取画布的二维上下文
var ctx = canvas.getContext("2d");
// 使用画布绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50,30, 470, 240);
</script>
</body>
</html>
示例:绘制圆
在下面的代码中,我们使用 arc() 方法绘制了一个圆。它将圆位置的坐标作为前 2 个参数,将圆的半径作为第三个参数。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing circle on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
// 获取画布的二维上下文
var ctx = c.getContext("2d");
// 使用画布绘制圆形
ctx.beginPath();
ctx.arc(300, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fill();
</script>
</body>
</html>
示例:绘制线条
在下面的代码中,我们使用 moveTo() 和 lineTo() 方法绘制了线条。moveTo() 方法将线条的起点作为参数,lineTo() 方法将线条的终点作为参数。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing lines on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// 获取画布的二维上下文
var ctx = canvas.getContext("2d");
// 使用画布绘制线条
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();
ctx.moveTo(300, 200);
ctx.lineTo(400, 0);
ctx.stroke();
</script>
</body>
</html>
示例:绘制线性渐变
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Drawing linear gradient on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "300" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// 获取画布的二维上下文
var ctx = canvas.getContext("2d");
// 绘制线性渐变
ctx.beginPath();
var grd = ctx.createLinearGradient(0, 0, 440, 0);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 550, 240);
ctx.fill();
ctx.closePath();
</script>
</body>
</html>
示例:文本呈现
在下面的示例中,我们在画布上渲染了一条文本消息 “Hello”。为此,我们使用了 fillText() 方法。HTML Canvas 中的 fillText() 方法在 canvas 元素上绘制文本字符串。
<html>
<body>
<h2> JavaScript - Canvas </h2>
<p> Rendering text on Canvas using JavaScript</p>
<canvas id = "myCanvas" width = "600" height = "200" style = "border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
// 获取画布的二维上下文
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'red';
ctx.fillText('Hello, Canvas!', 150, 100);
</script>
</body>
</html>
我们已经学会了在 HTML 中使用 <canvas> 元素,并通过使用 JavaScript 访问元素来绘制图形。我们可以绘制各种形状并为形状添加颜色。