1、什么是canvas？
<canvas>标签是h5新增的，通过脚本（通常是js）来绘制图形，canvas只是一个图形容器，或者说是画布。
canvas可以绘制路径、图形、字以及添加图像。
2、创建一个画布
<canvas id="can" width="200" height="100"></canvas>
canvas中需要指定一个id属性供脚本引用，width和height定义画布的大小。另外可以用style来添加画布边框。
<style type="text/css">canvas { border: #ccc solid 1px; } </style>
3、使用js绘制图像
canvas本身没有绘图能力，所有的绘图工作必须在js内部完成：
首先找到canvas元素：
var can=document.getElementById（"can"）;
其次创建context对象（getContext（"2d"）对象是内建的H5对象，拥有多种绘制图形方法）：
var ctx=can.getContext（"2d"）;
设置填充图形的颜色：
ctx.fillStyle="#FF0000"; // fillStyle可以是css颜色，渐变，或图案，默认设置是黑色（#000000）
定义矩形：
ctx.fillRect（0,0,150,70）; // fillRect（x,y,width,height）定义了矩形及其长宽
4、Canvas坐标
canvas是一个二维网格。cancas的左上角坐标为（0，0），上面的fillRect方法的参数（0，0，150，70）意思就是从左上角（0，0）开始在画布上绘制一个150*70的矩形。
5、Canvas路径
画线：
beginPath（）;新建一条路径
moveTo（x,y）;定义线条开始坐标
lineTo（x,y）；定义线条结束坐标
closePath（）;闭合路径后，图形绘制又重新回到上下文中
stroke（）;通过线条来绘制图形轮廓
fill（）;通过填充路径的内容区域生成实心的图形
实例：
var can=document.getElementById（"can"）;
var ctx=can.getContext（"2d"）;
ctx.moveTo（0,0）;
ctx.lineTo（200,100）;
ctx.stroke（）;
画圆：
1、arc（x1,y1,x2,y2,radius）；
根据给定的控制点和半径画圆弧
ctx.arc（95,50,40,0,2*Math.PI）;
2、arc（x,y,r,startAngle,endAngle,anticlockwise）;
以（x,y）为圆心，r为半径，从startAngle弧度开始到endAngle弧度结束。anticlockwise为true表示逆时针，false为顺时针
0弧度指x轴正方向 ，角度转换成弧度：（Math.PI/180）*degrees
ctx.arc（50,50,40,0,Math.PI/2,false）;
arcTo方法的说明：
这个方法可以这样理解。绘制的弧形是由两条切线所决定。
第 1 条切线：起始点和控制点1决定的直线。
第 2 条切线：控制点1 和控制点2决定的直线。
其实绘制的圆弧就是与这两条直线相切的圆弧。
贝塞尔曲线请自行上网搜索。
6.canvas文本
font定义字体
fillText（text,x,y）绘制实心文本
strokeText（text,x,y） 绘制空心文本
var c=document.getElementById（"myCanvas"）;
var ctx=c.getContext（"2d"）;
ctx.font="30px Arial";
ctx.fillText（"Hello World",10,50）;
7、canvas渐变
createLinearGradient（x,y,x1,y1）创建线条渐变
createRadialGradient（x,y,r,x1,y1,r1）创建一个径向/圆渐变
addColorStop（）指定颜色停止，参数使用坐标描述，可以是0至1
线性：
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 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）;
8、canvas图像
drawImage（image,x,y）;
var c=document.getElementById（"myCanvas"）;
var ctx=c.getContext（"2d"）;
var img=document.getElementById（"scream"）;
或者 var img=new Image（）;
img.src="flower.png";
ctx.drawImage（img,10,10）;
9、添加样式和颜色
fillStyle =color 设置图形填充颜色
strokeStyle=color 设置图形轮廓颜色
10、变形
translate（x，y）用来移动canvas的原点到指定的位置
rotate（angle）旋转坐标轴（angle为顺时针方向，弧度为单位，旋转中心为坐标原点）
11、同一个画布如何只改变其中一条线的颜色：（先保存线条在涂色，然后restore到上一状态）
function arrow2（canId, ox, oy, x1, y1, x2, y2,color） { //参数说明 canvas的 id ，原点坐标 第一个端点的坐标，第二个端点的坐标 var sta = new Array（x1, y1）; var end = new Array（x2, y2）;
var canvas = document.getElementById（canId）; if（canvas == null） return false; var ctx = canvas.getContext（'2d'）; //画线 ctx.beginPath（）; ctx.translate（ox, oy）; //坐标源点 ctx.moveTo（sta[0], sta[1]）; ctx.lineTo（end[0], end[1]）; ctx.save（）; ctx.strokeStyle=color;//线条颜色 ctx.fillStyle = color;//箭头颜色 ctx.fill（）; ctx.stroke（）;
//画箭头 ctx.translate（end[0], end[1]）; //我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号 var ang = （end[0] - sta[0]） / （end[1] - sta[1]）; ang = Math.atan（ang）; if（end[1] - sta[1] >= 0） { ctx.rotate（-ang）; } else { ctx.rotate（Math.PI - ang）; //加个180度，反过来 } ctx.lineTo（-5, -10）; ctx.lineTo（0, -5）; ctx.lineTo（5, -10）; ctx.lineTo（0, 0）; ctx.fill（）; //箭头是个封闭图形 ctx.restore（）; //恢复到堆的上一个状态 ctx.closePath（）; }
画布如果与div或其他块标签冲突，可以让画布背景变透明加style如下：
<canvas id="Canvas1" width="140" height="400" style="background: rgba（255,255,155,0）; position: absolute;left: 130px; z-index: -1">你的浏览器不支持canvas,请升级你的浏览器</canvas>
z-index代表叠加顺序。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h59913.shtml
