HTML canvas标签

本文概述

• 如何创建HTML画布？
• HTML 5 Canvas标签示例
• 支持的浏览器
• 带有JavaScript的HTML画布标签
• 在画布上画线
• 在画布上绘制圆
• 在画布上绘制文字

HTML canvas元素为HTML提供了一个可使用位图的表面。它用于在网页上绘制图形。

HTML 5 <canvas>标记用于使用脚本语言（如JavaScript）绘制图形。

<canvas>元素只是用于图形的容器, 必须使用脚本语言才能绘制图形。 <canvas>元素允许对2D形状和位图图像进行动态且可编写脚本的渲染。

它是一种低级的过程模型, 可更新位图且没有内置场景。画布中有几种绘制路径, 框, 圆, 文本和添加图像的方法。

如何创建HTML画布？

画布是HTML页面上类似矩形的区域。用canvas元素指定。默认情况下, <canvas>元素没有边框, 也没有内容, 就像一个容器。

<canvas id = "mycanvas" width ="200" height ="100"> </canvas>

HTML 5 Canvas标签示例

<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
Your browser does not support the HTML5 canvas tag.
</canvas>

立即测试

输出：

你的浏览器不支持HTML5 canvas标签。

注意：始终需要指定id属性和height＆width属性来定义画布的大小。一个HTML页面上可以有多个canvas元素。

支持的浏览器

带有JavaScript的HTML画布标签

画布是二维网格。

坐标（0, 0）定义画布的左上角。参数（0, 0, 200, 100）用于fillRect()方法。此参数将填充从左上角（0, 0）开始的矩形, 并绘制200 * 100矩形。

<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 100);
</script>

输出：

你的浏览器不支持HTML5 canvas标签。

在画布上画线

如果要在画布上绘制直线, 可以使用以下两种方法。

moveTo（x, y）：用于定义线的起点。

lineTo（x, y）：用于定义线的终点。

如果绘制起点为（0, 0）且终点为（200, 100）的线, 请使用描边方法绘制该线。

<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

输出：

你的浏览器不支持HTML5 canvas标签。

在画布上绘制圆

如果要在画布上绘制圆, 可以使用arc()方法：

arc(x, y, r, start, stop)

要在HTML画布上绘制圆, 请使用ink()方法之一, 例如stroke()或fill()。

<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasCircle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke();
</script>

输出：

你的浏览器不支持HTML5 canvas标签。

在画布上绘制文字

有一些属性和方法可用于在画布上绘制文本。

字体属性：用于定义文本的字体属性。

fillText（text, x, y）方法：用于在画布上绘制填充文本。它看起来像粗体。

strokeText（text, x, y）方法：它也用于在画布上绘制文本, 但文本未填充。

让我们看一下fillText()方法示例。

<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3d3;">
Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello srcmini", 10, 50);
</script>

输出：

抱歉!你的浏览器不支持HTML5 canvas标签。

让我们看一下strokeText()方法示例。

<canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #d3d3d3;">
 Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText2");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello srcmini", 10, 50);
</script>

输出：

抱歉！升级你的浏览器。它不支持HTML5 canvas标签。