<canvas>新元素
<canvas> 元素用于图形的绘制，通过脚本 (通常是javascript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用canva绘制路径,盒、圆、字符以及添加图像。
注意: 默认情况下 <canvas> 元素没有边框和内容。
画方
<!--fillstyle是填充样式，如果不设置fillstyle属性，默认填充色为黑色，fillrect是画一个矩形，参数为x,y,width,height--><!doctype html><html><head><meta charset="utf-8" name="author" content="赵慧娟"><title></title><script src="scripts/jquery-1.10.2.js?1.1.10"></script><script type="text/javascript">$(function(){var canvas=document.getelementbyid(mycanvas)var ctx=canvas.getcontext(2d);
ctx.fillstyle=deeppink;
ctx.fillrect(10,10,100,100);
//ctx.moveto(0,0);//定义开始坐标
//ctx.lineto(100,100);//定义结束坐标
//ctx.stroke();//绘制线条
})</script></head><body><canvas id="mycanvas" width="100" height="100"></canvas></body></html>
运行结果：
画圆
<!--arc画圆，参数是x,y,半径，起始角，结束角，顺时针/逆时针(可选)xy指的是圆点的距离--><!doctype html><html><head><meta charset="utf-8" name="author" content="赵慧娟"><title></title><script src="scripts/jquery-1.10.2.js?1.1.10"></script><script type="text/javascript">$(function(){var canvas=document.getelementbyid(mycanvas)var ctx=canvas.getcontext(2d);
ctx.fillstyle=deeppink;
ctx.arc(50,50,50,0,2*math.pi);
ctx.stroke();
//ctx.filltext(hello world,10,50);//绘制实心字体
//ctx.stroketext(hello world,10,50); //绘制空心字体
})</script><style type="text/css">canvas{border: 1px solid #000;}</style></head><body><canvas id="mycanvas" width="100" height="100"></canvas></body></html>
运行结果：
渐变
createlineargradient(x,y,x1,y1) - 创建线条渐变
createradialgradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
// 创建渐变var grd=ctx.createlineargradient(0,0,200,0);
grd.addcolorstop(0,red);
grd.addcolorstop(1,blue);
// 填充渐变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);
运行结果：
图像
<!doctype html><html><head><meta charset="utf-8" name="author" content="赵慧娟"><title></title><script src="scripts/jquery-1.10.2.js?1.1.10"></script><style type="text/css">canvas{border: 1px solid #000;}#flower{border: 1px solid #000;width: 100px;height: 100px;}</style></head><body><img src="img/a.ico" id="flower" /><canvas id="mycanvas" width="100" height="100"></canvas><script type="text/javascript">$(function(){var canvas=document.getelementbyid(mycanvas)var ctx=canvas.getcontext(2d);var img=document.getelementbyid(flower);
img.onload=function(){
ctx.drawimage(img,20,20,80,80);//drawimage（对象，x,y，w,h）}
})</script></body></html>
运行结果：
（右图为canvas图像）
以上就是html5-canvas的使用方法介绍的详细内容。