的HTML <canvas>元件用于绘制在网页上的图形。
图形向左与创建<canvas> 。 它显示了四个元件：一个红色矩形，梯度矩形，多色矩形和多色文本。
什么是HTML Canvas ？
的HTML <canvas>元素用于绘制图形，在飞行中，通过脚本(usually JavaScript)
所述<canvas>元素仅用于图形的容器。 您必须使用脚本来实际绘制图形。
Canvas具有绘制路径，矩形，圆形，文本和添加图像的几种方法。
画布元件是HTML5的一部分，并且允许在2D形状和位图图像的动态，脚本化渲染。 它是一种低层次的，程序模式，更新位图，没有一个内置的场景图。
浏览器支持
在表中的数字指定完全支持所述第一浏览器版本<canvas>元素。
| 元件 | |||||
|---|---|---|---|---|---|
| <canvas> | 4 | 9 | 2.0 | 3.1 | 9 |
历史
帆布最初是由苹果公司推出了2004年供电应用，如Dashboard构件和Safari浏览器自己的Mac OS X的WebKit组件内部使用。
后来，在2005年它在的Gecko的浏览器和Opera 1.8版本于2006年通过，并通过网络超文本应用技术工作组（WHATWG）在新提出的规格为下一代Web技术标准化。
用法
画布在于HTML代码定义的高度和宽度的属性的可拉伸区域的。 JavaScript代码可以通过全套类似其他常见2D的API的绘图功能访问区域，从而允许动态地产生的图形。
帆布的一些预期用途包括建筑图形，动画，游戏和图片组成。
Canvas例子
一个canvas是一个HTML页面上的矩形区域。 默认情况下， canvas有没有边界，没有内容。
该标记看起来是这样的：
<canvas id="myCanvas" width="200" height="100"></canvas>
Note:总是指定的id属性(to be referred to in a script) ，和一个宽度和高度属性来定义的大小canvas 。
要添加边框，使用style属性：
基本Canvas例
<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> ， 请访问我们的完整的HTML Canvas教程 。