笔记—canvas基本操作

canvas

canvas一个画布，使用js操作的
用css给canvas设置大小，这不是画布大小，要在行间样式上设置；
var ctx = canvas.getContext(‘2d’); //这个属于画布上的画笔
ctx.beginPath(); 一次画的开始(重新开启一个路径) //规范：开始之前加上beginPath
ctx.moveTo(100,100); //画的起点
ctx.lineTo(200,100); //画到哪里
ctx.stroke(); //可以将画渲染上去
ctx.closePath(); //闭合图形，但是要一笔画才行
ctx.fill(); //填充
ctx.lineWidth=10; //设置线条粗细；
canvas画矩形:ctx.strokeRect(100,100,100,100); ctx.fillRect();//填充
canvas画弧/圆:
ctx.arc(100,100,50,0,Math.PI/2 , 0); (圆心100,100，半径50，起始弧度:0，
结束弧度:Math.PI/2, 顺时针0，逆时针1)。
canvas画圆角矩形:
ctx.arcTo(100,200,200,200,10); (起始点,终点,圆角大小)。
canvas画贝塞尔曲线:
ctx.quadraticCurveTo()
canvas坐标平移旋转与缩放
ctx.translate(100,100); //坐标系平移(转移坐标点);
ctx.rotate(Math.PI/6); //围绕图形所在坐标系原点进行旋转;
ctx.scale(2,2); //缩放 xy分别乘以它的系数， x乘2，y乘2；
坐标系平移、旋转是作用全局的
ctx.save(); //变化之前调用，存储当前的坐标平移以及旋转
在beginPath之后写ctx.restore();恢复所有的平移和旋转
ctx.save() 和 ctx.restore() //可以保存坐标的平移数据，缩放数据，旋转数据
ctx.fillStyle=‘red’; //变换背景
将背景变成图片：
var img = new Image();
img.src = “./good.png”;
ctx.createPattern(img,“no-repeat”); //创建一个纹理，将图片渲染上；第一个参数是把那个图片变成纹理，如果图片是异步加载，将ctx代码写到onload里面、
图片的填充，是以坐标系原点进行填充的，如果看不到图片就用translate().

canvas线性渐变
var bg = ctx.createLinearGradient(0,0,200,0);//里面的值等于fillRect里面的值。
bg.addColorStop(0,“white”);
bg.addColorStop(1,“black”); //渐变数值只能是从0到1之间的

canvas辐射渐变
var bg = ctx.createRadialGradient(x1,y1,r1,x2,y2,r2); //装有起始圆和结束圆
起始圆大于结束圆，外界就是起始圆的颜色，反之同理。
起始圆与结束圆相离时并且起始圆小：尖朝左
起始圆大于结束圆并且相离时 ：尖朝右
起始圆与结束圆相离且相等：平行柱

canvas阴影渐变
ctx.shadowColor=“red”; //阴影颜色
ctx.shadowBlur=10; //阴影值
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10; //移动阴影

canvas渲染文字
ctx.fillText(“abc”,100,100); //文字填充
ctx.font = “30px Georgia”;设置字体
ctx.strokeText(“abc”,100,100); //文字描边

canvas线端样式
ctx.lineCap=""; //值:butt默认 round：两端加长并且两端变圆 square:两端加长
ctx.lineJoin=""; //两条线接触的样式 值:miter:默认 round:变圆 bevel:砍平
设置miter时可以设置ctx.miterLimit=5;防止过分尖锐