canvas相关知识点。很实用！！！

canvas：

是H5新增的组件，他就像一块画布，可以用JS在上面绘制各种图形，动画等

    <h2>如果不设置宽高，canvas默认大小是width：300px height：150px</h2>
    <h3>注意
        1.canvas画布的比例一定要和初始化的比例一致，否则会扭曲变形
        2.建议不要用css属性设置canvas宽高
        3.canvas结束标签不能省略
    </h3>
    <canvas width="300" height="200" id="huabu">
        <h2>canvas兼容:(IE9)
            如果浏览器支持canvas标签，就会去渲染canvas标签，而忽略canvas标签内容，否则就会直接渲染替代内容
        </h2>
        <h3>文本替代</h3>
    </canvas>

使用：
canvas公开了一个或多个渲染上下文(画笔),使用渲染上下文(画笔)来绘制和处理要展示的内容(2D),(3D,openGL)
// 第一步:获取画布,获取画笔
var canvas=document.getElementById(“cav”);
canvas.style.border=”1px solid black”
// 第二步：获取渲染上下文(画笔)
var huabi=canvas.getContext(“2d”);
// 第三步：绘制
huabi.beginPath();
// 绘制开始的起点坐标
huabi.moveTo(50,50);
huabi.lineTo(75,25);
// 从画笔开始的位置,画一条直线到100,50
huabi.lineTo(100,50);
// huabi.lineTo(125,75);
// 从当前位置在画一条线到100,100处
huabi.lineTo(100,100);
// huabi.lineTo(75,125);

        huabi.lineTo(50,100);

// huabi.lineTo(25,75);
// 关闭绘制路径
huabi.closePath();
// 第四步:给画笔添加样式
// 设置线宽
huabi.lineWidth=2;
// 设置描边颜色
huabi.strokeStyle=”red”;//rgb，rgba，#000
huabi.stroke();//描边 stroke：描
// 设置线的填充样式
huabi.fillStyle=”yellow”;
// 进行填充
huabi.fill();
清除画布：
// ctx.clearRect(0,0,cvs.width,cvs.height);

//getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object,有6个属性 top 、bottom、right、left、width和height
画矩形
ctx.rect(210,210,100,100);
// 第一个参数:距离canvas左上角的水平距离
// 第二个参数:距离canvas左上角的垂直距离
// 第三个参数:矩形宽
// 第四个参数:矩形高
ctx.rect(50,250,100,100);
// ctx.stroke();
// 相当于
ctx.strokeRect(50,250,80,80);
圆形：
第一个概念:
// 弧度角公式 1度=rad
// 1度*Math.PI/180=一度所对应的弧度数
// ctx.beginPath();
// ctx.moveTo(200,200);
// ctx.arc(200,200,100,0*Math.PI/180,90*Math.PI/180,true);
// 第一个参数和第二个参数:圆形坐标
// 第三个参数:绘制圆的半径
// 第四个参数:开始绘制的角度
// 第五个参数:结束绘制的角度
// 第六个参数:是否是逆时针,true是逆时针,false是顺时针
// ctx.closePath();
// ctx.stroke();
// ctx.fillStyle=”green”
// ctx.fill();
圆角矩形：
arcTo(弧起点X,弧起点Y,弧终点X,弧终点Y.弧半径)
// 创建俩个切线之间的弧
文字：
ctx.font=”40px bold 宋体”;
ctx.textAlign=”center”;
ctx.textBaseline=”bottom”;
ctx.strokeStyle=”yellow”
ctx.strokeText(“hello canvas”,150,150);
阴影：
ctx.shadowColor=”gray”;
ctx.shadowBlur=1;
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.strokeText(“Test shadow”,150,250,400);
// Test shadow:文本内容
// 150,250文本位置
// 400;可选,文本的最大宽度
渐变：
// 0,0:起点坐标
// canvas.width,0:终点坐标
var grad=ctx.createLinearGradient(0,0,canvas.width,0);
grad.addColorStop(“0”,”red”);
grad.addColorStop(“0.1”,”yellow”);
grad.addColorStop(“0.3”,”purple”);
图形组合：
globalCompositeOperation:全局组合操作
// ctx.globalCompositeOperation=”source-over”;
// ctx.globalCompositeOperation=”source-in”;
// ctx.globalCompositeOperation=”source-out”;
// ctx.globalCompositeOperation=”source-atop”;
// ctx.globalCompositeOperation=”destination-over”;
// ctx.globalCompositeOperation=”destination-in”;
ctx.globalCompositeOperation=”destination-out”;
ctx.globalCompositeOperation=”destination-atop”;
ctx.globalCompositeOperation=”lighter”;//旧图与新图都绘制，重叠部分混色处理
ctx.globalCompositeOperation=”xor”;//旧图和新图重叠处做透明处理
ctx.globalCompositeOperation=”copy”;//只绘制新图形，不绘制旧图形
线的样式：
ctx.lineCap=”round”;
ctx.lineCap=”butt”;
ctx.lineCap=”square”;
相交线的样式：
ctx.lineJoin=”round”;
ctx.lineJoin=”bevel”;
ctx.lineJoin=”miter”;
图片：
1.绘制图像：drawImage()
2.获取图像数据：getImageData()
3.重写图像数据：putImageData()
4.导出图像：toDataURL()
//第一种获取图片的方式
var imgEle=document.getElementById(“photo”);
imgEle.addEventListener(“load”,function(){
ctx.drawImage(imgEle,10,20);
// imgEle:图片元素
// 10,20:图片距离canvas左上角的距离
})
//第二种创建图片的方式
var image=new Image();
image.src=”banner6.jpg”;
image.onload=function(){
for (var i=0;i<3 ;i++){
ctx.drawImage(image,100+i*60,100+i*60)
}
//变形拉伸
ctx.drawImage(image,450,20,100,100)
// 不变形
var h=100*image.height/image.width;
ctx.drawImage(image,450,200,100,h);
}
绘制图片：
ctx.drawImage(image,0,0,60,70,0,0,60,70);
// 参数:
// 1.图片对象
// 2.截取的图片x坐标
// 3.截取的图片y坐标
// 4.截取图片的宽
// 5.截取图片的高
// 6,7.绘制图片的x,y坐标
// 8,9:绘制图片的宽高
径性渐变：
var radG=ctx1.createRadialGradient(30,30,3,30,35,20);
// 30,30:渐变开始圆坐标
// 3:开始渐变圆的半径
// 30,35:渐变结束圆的坐标
// 20:结束圆的半径
画布之间绘制
ctx2.drawImage(canvas1,10,10);
图片铺的方式：
var pat=ctx.createPattern(img,”repeat”);
// img:图片对象
// repeat:平铺方式
// no-repeat repeat-x repeat-y
ctx.fillStyle=pat;
画布剪切：
ctx.clip();