HTML5 Canvas


您的浏览器不支持<canvas>元素。

HTML <canvas>元素用于在网页上绘制图形。

左侧的图形是使用<canvas>创建的。它显示了四个元素:红色矩形,渐变矩形,多色矩形和多色文本。


什么是HTML Canvas?

HTML <canvas>元素用于通过JavaScript动态绘制图形。

<canvas>元素只是图形的容器。您必须使用JavaScript来实际绘制图形。

Canvas有几种绘制路径,方框,圆形,文本和添加图像的方法。


浏览器支持

表格中的数字表示支持 <canvas> 元素的第一个浏览器版本号

元素(Element)
<canvas> 4.0 9.0 2.0 3.1 9.0

画布示例

画布是HTML页面上的矩形区域。默认情况下,画布没有边框,也没有内容。

标记看起来像这样:

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

注意:始终指定 id属性(在脚本中引用),以及 widthheight属性以定义画布的大小。要添加边框,请使用 style属性。

这是一个基本的空画布示例:

您的浏览器不支持canvas元素。

实例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
运行 »

绘制一条线

您的浏览器不支持canvas元素

实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
运行 »

绘制一个圆圈

您的浏览器不支持canvas元素

实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
运行 »

绘制一段文字

您的浏览器不支持canvas元素

实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
运行 »

给文字描边

您的浏览器不支持canvas元素

实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
运行 »

绘制线性渐变

您的浏览器不支持canvas元素

实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
运行 »

绘制径向渐变

您的浏览器不支持canvas元素

实例

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
运行 »

绘制图像

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
运行 »

HTML Canvas教程

要了解有关HTML <canvas> 所有信息,请访问我们的 完整HTML Canvas教程