W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML5 Canvas



Your browser does not support the <canvas> element.

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

左边的图形是由 <canvas> 元素创建的。它显示了四个元素:红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。


什么是 HTML Canvas?

HTML <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。


浏览器支持

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

元素
<canvas> 4.0 12.0 9.0 2.0 3.1 9.0

Canvas 实例

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

标记看起来像这样:

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

注意: 标签通常需要指定一个id属性 (脚本中经常引用),width 和 height 属性定义的画布的大小。

若要添加边框,请使用样式属性:

基本画布实例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
尝试一下 »

使用JavaScript绘制

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
尝试一下 »

画一条线

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
尝试一下 »

画一个圆

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

绘制文本

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

创建空心文本

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

创建一个线性渐变

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

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
尝试一下 »

创建一个径向/圆渐变

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

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
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>,请查看 Canvas 参考手册