HTML5新特性——canvas画布属性

画布

步骤
//1.获得页面画布
var con1=document.getElementById(“con1”);
//2.创建画笔 创建上下文
var cxt1=con1.getContext(“2d”);
//3.画直线
cxt1.moveTo(50,50);//开始坐标
cxt1.lineTo(200,200);//结束坐标
cxt1.stroke();//连城线
cxt1.lineWidth设置线体粗细
cxt1.strokeStyle设置线体颜色
画曲线
二次曲线
cxt1.quadraticCurveTo(x1,y1,x2,y2);
贝塞尔曲线
cxt1.bezierCurveTo(x1,y1,x2,y2,x3,y3);
画三角形
空心
cxt1.moveTo(400,20);
cxt1.lineTo(2.,300);
cxt1.lineTo(780,300);
cxt1.lineTO(400,20);
cxt1.stroke();
实心
cxt1.fillStyle=“red”;//设置填充色
cxt1.moveTo(400,20);
cxt1.lineTo(20,300);
cxt1.lineTo(780,300);
cxt1.lineTo(400,20);
cxt1.fill();//填充颜色
cxt1.lineCap线体两端样式
butt对接点 round圆 square方块
cxt1.linejoin线条转折处的样式
bevel平角 miter尖角 round圆角
矩形
空心
cxt1.strokeStyle=“red”;
cxt1.strokeRect(50,50,400,300);
实心
cxt1.fillStyle=“blue”;
cxt1.fillRect(300,300,400,300);
cxt1.fill();
圆形
空心
cxt1.arc(中心点x,中心点y，半径，弧长开始位置，结束位置,false);
cxt1.stroke();
实心
cxt1.arc(500,200,100,0,Math.PI*2,false);
cxt1.fill()
begin和close的作用
begin开始画笔 close结束画笔
如果在页面上画两个图片，会被当成一个图形绘制，图形的样式也会被设置成统一的样式，在每一个图形前后加上这两个方法就会让图形之间不会有冲突，并且closePath结束路径，可以上没填满的形状自动合并。
save和restore的作用
save保存图形 restore返回之前的图形状态
如果画了多个图形，每一个图形都有一个save方法，则新的图形样式会覆盖之前的图形样式，如果在某一个图形之间设置了restore,则当前图形的样式会采用上一个图形的样式。

文字
空心
cxt1.font=“80px 楷体”;
cxt1.strokeText(“看看文字效果”,100,100);
实心
cxt1.fillText(“看看文字效果”,100,400);
图片
var img=new Image();//创建图片
img.crc-“img/1,jpg”;//设置地址
cxt1.drawImage(img,0,0,con1.width,con1.height);//绘制
组合图形
cxt.globalCompositeOperation组合方法
1.source-over新图形在旧图形之上(默认)
2.destiantion-over旧图形在新图形之上
3.source-atop绘制旧图形所有面积和新图形的交叉位置
4.destiantion-stop绘制新图形所有面积和旧图形的交叉位置
5.source-in绘制两个图形的交叉位置，按新图形颜色显示
6.destiantion-in绘制两个图形的交叉位置，按旧图形颜色显示
7.source-out绘制新图形，减去旧图形交叉的面积
8.destiantion-out绘制旧图形，减去新图形交叉的面积
9.lighter绘制两个图形，交叉位置加色处理
10.darker绘制两个图形，交叉位置减色处理
11.copy只绘制新图形
12.xor绘制两个图形，交叉位置变透明
阴影效果
1.cxt.shadowOffsetX水平位置
2.cxt.shadowOffsetY垂直位置
3.cxt.shadowBlur模糊效果
4.cxt.shaowColor颜色
透明度
cxt.globalAlpha透明度 0-1之间的值
渐变
线性渐变
var linear=cxt.createLinearGradiet(200,0,200,300);
linear.addColorStop(0,“red”);//添加颜色和位置
linear.addColorStop(0.5,“blue”);
cxt.fillStyle=linear;//把渐变色付给背景色
cst.fillRect(0,0,400,300)
径向渐变
var rad=cet.createRadialGradient(中心点x，中心点y，小半径，3中心点x，中心点y，大半径);
rad.addColorStop(0,“red”)
rad.addColorStop(0.6,“yellow”);
cxt.fillStyle=rad;
cxt.arc(300,300,100,0,Math.PI*2,false);
cxt.fill();
矩阵变换
1.cxt.translate(x,y)移动
2.cxt.scale(x,y)缩放
3.cxt.rotate()旋转 默认顺时针 填入弧度
4.cxt.transform(宽度，水平扭曲，垂直扭曲，高度，水平移动，垂直移动)
其他
1.cxt.alearRect()清除矩形面积
2.cxt.clip()裁切形状