HTML5 之 Canvas （二）

**创建canvas**

在html文件:

<canvas id=canvas></canvas>

canves属性：width、height、getContext('2d') 绘图环境

不建议通过css方式指定canvs的大小
canvas的width和height属性不光是指定了canvas的像素尺寸，还指定了其内里图片的精度
1 给 canvas 指定大小时，尽量不要使用 CSS 样式，直接定义 canvas 的 width 和 height 属性(设置时没有单位):
<canvas id="canvas" width="1024" height="768"></canvas>
（当不设置 width 和 height 时，默认 width 为 300px，height 为 150px）

</canvas>
2 在 js 中需要两步初始化操作：
(1)var canvas = document.getElementById("canvas");//获取 canvas
(2)var context = canvas.getContext("2d");//得到绘图上下文环境，从而使 

   用 canvas 进行绘制
3 设置 canvas 的大小：
canvas.width = 1024;canvas.height = 768;

代码：

<canvas id="canvas" width="1024" height="768" style="border:1px solid #ccc;display:block;margin:20px auto;">

游览器不支持canvas的处理方式：

if(canvas.getContext("2d")){
var context = canvas.getContext("2d");
}else{
alert("当前游览器不支持canvas,请更换游览器调试");
}

a.使用canvas绘制直线：先设置绘制的状态 再画出线条
context.moveTo(100,100);//moveto是起始点
context.lineTo(700,700);//lineto是划线的点
context.lineWidth=5 //线条宽度
context.strokeStyle="red";//线条颜色
context.stroke();//stroke是笔画的意思，所以画的都是直线
context.fillStyle="green";//填充颜色
context.fill();//进行填充

b.矩形绘制：
cxt.rect(x,y,width,height)//规划矩形路径
cxt.fillRect(x,y,width,height)//绘制
cxt.strokeRect(x,y,width,height)//填充

rect(x,y,width,height)

颜色赋值：

fillstyle strokestyle(css支持的颜色，canvas都支持)
#ffffff;
#642
rgb(255,128,0)
rgba(100,100,100m0.8);
hsl(20,62%,28%);
hsla(40,82%,33%,0.6);
red

小结：

var context = canves.getContext('2d')
context设置属性
moveTo(x,y);lineTo(x,y);
beginPath closePath开始路径的开始以及结束
lineWidth
strokeStyle设置线条的样式
fillStyle设置填充样式
stroke
fill
rect(x,y,宽,高)

注意：

1.beginPath和colsePath成对出现时可以构成一个封闭图形
2.既有填充又有描边是先填充在描边，否则描边会被覆盖掉一半的宽度
比较好的代码书写顺序：
1、绘制图形的途径
2、绘制图形状态
3、绘制

线条属性：

1、lineCap 设置画布线条两端样式：
                              butt（default）
                              round
                              square

*绘制一个五角星：

var context = canvas.getContext("2d");
context.width = 800;
context.height = 800;
context.lineWidth = 10;
context.strokeStyle = "#efe0ce";
context.fillStyle = "rbg(255,0,0)";
context.fill();
drawStar(context,150,300,400,400,0,5,15);
// 多边形复用Star
// drawStar(cxt,r,R,x,y,rot,pol,angelStart)
// drawStar(context（绘图环境）、内圆半径、外圆半径、Star的X轴偏移量、Star的y轴偏移量、Star旋转度数（顺时针）、几边形、Star旋转度数（逆时针）)
function drawStar(cxt,r,R,x,y,rot,pol,angelStart){
cxt.beginPath();
for (var i=0;i<pol;i++){
cxt.lineTo(x+R*Math.cos((angelStart+(360/pol)*i-rot)/180*Math.PI)
,y-R*Math.sin((angelStart+(360/pol)*i-rot)/180*Math.PI));
cxt.lineTo(x+r*Math.cos((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI)
,y-r*Math.sin((angelStart+360/(pol*2)+(360/pol)*i-rot)/180*Math.PI));
}
cxt.closePath();
cxt.stroke();
}

lineJoin 相交的效果
默认:miter 尖角、 bevel 斜接、 round 圆角.
miterLimit 当lineJoin属性为miter时 内角距离的最大值(线条实线的尖角和宽度外的线相夹角),超过的话将使用bevel.默认为10.

2.填充样式：

fillStyle除了可以设置颜色，还可以设置渐变（线性渐变和径向渐变）。
线性渐变：
//两个坐标构成一个线段，即渐变线（用于定义渐变的方向和尺度）
step1： var grd = context.createLinearGradient( xstart, ystart, xend, yend );
//渐变线上的关键色（参数stop是一个浮点值，决定关键色的位置；参数color决定关键色的颜色）
step2： grd.addColorStop( stop, color );

径向渐变：
step1： var grd = context.createRadialGradient( x0, y0, r0, x1, y1, r1 );
step2： grd.addColorStop( stop, color );

图片填充：
createPattern( img, repeat-style );
画布填充：
createPattern( canvas, repeat-style );
视频背景填充：
createPattern( vedio, repeat-style );

小结：

fillStyle=color、gradient(渐变色(（createLinearGradient） (createRadialGradient)+addColorStop(stop,color))、（（image(var img=new Image() img.src=路径)、canvas（注意创建的新节点createElement("")、return 节点）、video）+createPattern（以上类型,repeat/repeat-x/y））

曲线绘制：

1、弧形路劲绘制
context.beginPath();
context.arc(
centerX,centerY,radius, //圆心坐标和半径
startingAngle,endingAngle, //起始弧度值结束弧度值
anticlockwise = false //绘制方向， false顺时针，true逆时针
); //这个同样只是路劲的绘制
context.stroke(); // 线圆弧 这里的绘制没有context.closePath();表示绘制弧形首尾不用线段连接
context.fillStyle = "#005588"; //设置填充颜色
context.fill(); //根据路劲和设置的颜色进行填充，填充的话会自动把路劲首位相连然后填充

context.arcTo( x1, y1, x2, y2, radius );
绘制起点是( x0, y0 )，但是( x0, y0 )不一定是切点，arcTo 方法在( x0, y0 )( x1, y1 )和( x1, y1 )( x2, y2 )两条线段上寻找切点，绘制圆弧（圆弧终止于( x1, y1 )( x2, y2 )这条线段的切点），而且，( x2, y2 )不一定是所绘制圆弧的终点，只是作为辅助线的结束位置，其中( x0, y0 )是上一个点的位置。

2、曲线绘制：（http://tinyurl.com/html5bezier）

二次贝塞尔曲线 QuadraticCurveTo :
context.moveTo( x0, y0 ); //指定初始点
context.quadraticCurveTo( x1, y1, x2, y2 ); //指定控制点（x1, y1）和终止点（x2, y2）

贝塞尔三次曲线 BezierCurveTo
context.moveTo( x0, y0 );
context.bezierCurveTo( x1, y1, x2, y2, x3, y3 );

小结：

三种曲线绘制方法
1、arc/arcto：绘制圆弧
2、quadraticCurveTo：一个控制点
3、bezeirCurveTo：两个控制点

beginpath 代表开始一个新路径
closepath 是结束当前路径，如果图形不是封闭的他就会封闭图形，解决办法是不使用closepath

3、文字的渲染：

context.font="样式 字号 字体"；
context.fillText("书写的文字"，文字的x，文字的y);
context.strokeText("",x,y,最长宽度：单位为像素)

context.strokeText( string, x, y, [maxlen] ); //用于绘制一行文字，同时给这行文字添加外边框

font-style: normal(默认)/italic(斜体字)/oblique(倾斜字体)
font-variant:normal(默认)/small-caps(只要在使用英文小写字母时才能看出区别，以一种小型的大写字母形式显示小写字母)
font-weight:lighter/normal(默认)/bold/bolder,,也可以使用数字设置：100,200,300,400(默认),500,600,700(bold)，800,900
font-size:px(默认，如20px)/em(如2em)/百分比%(如150%)，也可以使用以下属性值进行设置：xx-small, x-small, medium, large, x-large, xx-large
font-family:可以设置多种字体备选；支持@font-face；web安全字体

文字垂直对齐
是根据context.fillText(string,x,y)中的y值进行上对齐、下对齐或居中的。
后面三个分别表示拉丁文的垂直方向基准线、日语中文等方块字的垂直方向基准线、印度文的垂直方向基准线。
水平对齐
context.textAlign = left/middle/right
是根据context.fillText(string,x,y)中的x值进行左对齐、右对齐或居中的。

文本的度量：
context.measureText( string ).width;