HTML 画布

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

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

什么是 HTML Canvas？

HTML canvas（通过 标签使用）是一个 HTML 元素，用于在用户计算机屏幕上动态绘制图形（线条、条形图、图表等）。不过，canvas 元素只是信息的容器；绘图是通过 JavaScript 完成的。所有支持 HTML5 并可以呈现 JavaScript 的现代 Web 浏览器都支持它。创建 HTML 画布非常简单，您可以将其添加到 中。通过以下方式访问任何 HTML 页面。

语法：

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

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

代码：

<style>
#examplecanvas{border:2px solid green;}
</style>


<canvas id="examplecanvas" width="500" height="300"></canvas>

输出：

HTML Canvas 绘图示例

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

1.在页面上画一条线

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

代码：

<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>


<canvas id="examplecanvas" width="400" height="300"></canvas>

输出：

2.在 HTML Canvas 上绘制圆形

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

 语法：

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

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

代码：

<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>


<canvas id="examplecanvas" width="500" height="300"></canvas>

输出：

3.在 HTML Canvas 中绘制文本

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

代码：

<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>


<canvas id="examplecanvas" width="500" height="200"></canvas>

输出：

4.在 HTML Canvas 内绘制圆弧

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

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

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

代码：

<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>


<canvas id="examplecanvas" width="600" height="400"></canvas>

输出：

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

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

语法：

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

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

代码：

<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>

输出：

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

语法：

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

代码：

<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>

输出：

结论

现在您已经熟悉了它是什么以及如何在网页中使用它，您应该对自己的网页设计技能更有信心。虽然在某些情况下可以使用图像，但 HTML 画布的好处是它具有可扩展性，并且在大小和处理能力方面更轻。

以上是HTML 画布的详细内容。更多信息请关注PHP中文网其他相关文章！