<canvas>标签定义图形，比如图标和其他图像，你必须使用脚本来绘制图形

在画布上（Canvas)画一个红丝矩形，渐变矩形，彩色矩形和一些彩色的字

什么是Cancas？

HTML5<canvas>元素用于图形的绘制，通过脚本（JavaSpript）绘制来完成

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

你可以通过多种方法使用canvas绘制路径，盒，圆，字符以及添加图形

注意：默认情况下<canvas>没有边框和内容   

<canvas>简单实例如下

<canvas id = "myCanvas"  width="200" height="100"></canvas>  这样显示是没有边框的

可以使用style属性添加边框

<canvas id="myCanvas" width="200" height="100" style="border:1px" solid #000000>

</canvas>

使用JavaSpript来绘制图形

var c=document.getElementById("myCanvas");    首先，找到<canvas>元素

var ctx=c.getContext("2d"); 创建context对象

下面就是就是绘制一个红色的矩形

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，图案。默认是#000000黑色

fillRect（x,y,width,height）方法定义了矩形当前的填充方式

Canvas路径

矩形画一个对角线

var c=document.getElementById("myCanvas");   

var ctx=c.getContext("2d"); 创建context对象

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

矩形中间画一个圆

var c=document.getElementById("myCanvas");   

var ctx=c.getContext("2d"); 创建context对象

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

空心文本

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

创建一个径向/圆渐变，使用渐变填充矩形

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

Canvas 图像

把一副图像放置到画布上，使用以下方法

var c=document.getElementById("myCanvas");   

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

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);