HTML 画布-html教程-PHP中文网

本文将在 HTML Canvas 上看到大纲；如您所知，HTML 是一种标记语言。为了向访问者呈现信息，您可以编写 HTML，其中包含要显示的文本以及显示方式，即字体大小、颜色、方向等。在向页面添加视觉效果时，您需要链接并将图像嵌入到页面中，这些图像与主机上的 HTML 文件分开存储。

但是如果你需要在页面上画一些东西怎么办？

什么是 HTML Canvas？

HTML canvas（通过

语法：

<canvas id="example" width="200" height="200">
<em>Content here</em>
</canvas>

登录后复制

您可以通过 width 和 height 属性定义画布大小；还可以在标签中定义元素 ID，这样就可以在画布元素上使用 CSS 样式。以下是如何使用 Canvas 元素绘制矩形的示例：

代码：

<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>

登录后复制

输出：

HTML 画布

HTML Canvas 绘图示例

现在您已经了解了如何使用 canvas 元素绘制矩形，让我们看一下可以使用浏览器输出屏幕上的元素绘制的其他一些对象。

1.在页面上画一条线

moveTo()、strike() 和 lineTo() 是可用于在网页上绘制直线的方法。正如您所猜测的，moveTo() 告诉光标在元素空间中的位置，而 lineTo() 是告诉线的端点的方法。 stroke() 使线条可见。以下是代码供您参考：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>

登录后复制

输出：

HTML 画布

2.在 HTML Canvas 上绘制圆形

与矩形不同，JavaScript 中没有特定的方法来绘制圆形。相反，我们可以使用 arc() 方法，该方法用于绘制圆弧，从而在画布中绘制圆形。要获得带有圆圈的画布，您可以使用以下命令：

语法：

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

登录后复制

这是带有圆圈的页面示例：

代码：

<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>

登录后复制

输出：

HTML 画布

3.在 HTML Canvas 中绘制文本

文本也可以在 HTML Canvas 中绘制。要将文本显示到画布上，可以使用 filltext() 方法。以下是在 canvas 元素内包含文本的 HTML 页面示例：

代码：

<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>

登录后复制

输出：

HTML 画布

4.在 HTML Canvas 内绘制圆弧

正如我们讨论的圆，有一个名为 arc() 的方法，用于在 HTML Canvas 中绘制圆弧。这是该方法的语法，您所要做的就是添加变量：

context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);

登录后复制

以下是一个 HTML 页面，画布元素内有一个圆弧：

代码：

<html lang="en">
<head>
<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>

登录后复制

输出：

HTML 画布

5.绘制线性或圆形颜色渐变

您可以使用此方法 createLienearGradient() 在画布元素内绘制您选择的渐变。使用此方法，您必须使用 addColorStop() 来表示渐变颜色。

语法：

var gradient = context.createLinearGradient(startX, startY, endX, endY);

登录后复制

这是一个具有线性渐变的页面：

代码：

<html>
<body>
<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,150);
</script>
</body>
</html>

登录后复制

输出：

HTML 画布

同样，绘制圆形渐变的方法是createRadialGradient()。

语法：

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

登录后复制

代码：

<html>
<body>
<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80,50,10,100,50,90);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

登录后复制

输出：

HTML 画布