canvas总结

1.注意点：
– canvas 图像的渲染有别于html图像的渲染，
canvas 的渲染极快，不会出现代码覆盖后延迟渲染的问题
写canvas 代码一定要具有同步思想
– 在获取上下文时，一定要先判断浏览器是否能获取到getContext()方法
– 画布宽高的问题
画布默认的宽高为300*150
一定要用html的attribute的形式来定义画布的宽高
通过css形式定义会缩放画布内的图像
– 绘制矩形的问题:
1.边框的宽高问题，边框宽高是在偏移量上下分别渲染一半，可能会出现小数边框，
一旦出现小数边框都会向上取整
2.canvas的api只支持一种图像的直接渲染：矩形
– 我们无法使用选择器来选中canvas中的图像
2.画布API
canvas.getContext(“2d”); 获取画布2d上下文
canvas.width 获取画布在横向上css像素的个数
canvas.height 获取画布在纵向上css像素的个数
canvas.toDataURL(); 拿到画布的图片地址
3.上下文API
ctx.fillRect(x,y,w,h); 填充矩形
ctx.strokeRect(x,y,w,h); 带边框的矩形
ctx.clearRect(0,0,canvas.width,canvas.height); 清除整个画布
需要注意原点的位置
ctx.fill(); 通过填充路径的内容区域，生成实心的图形,会自动调用closePath();
ctx.stroke(); 通过线条来绘制图形轮廓,不会自动调用closePath()
ctx.fillStyle = “color”; 设置图形的填充颜色;
填充背景 fillstyle的值可以是createPatter(image,repetition)返回的对象
填充线性渐变 fillStyle的值可以是createLinearGradient(x1,y1,x2,y2)返回对象，仅定义渐变的方向
addColorStop(position,color);定义渐变的颜色
填充径向渐变 fillStyle的值可以是createRadialGradient(x1,y1,r1,x2,y2,r2)返回对象
addColorStop(position,color);
ctx.strokeStyle = “color”; 设置图形轮廓的颜色
ctx.lineWidth = 123; 设置绘制线条的宽度，必须是正数，不用带单位
ctx.lineJoin = “round”; 定义线条与线条结合处（角）的样式：miter直角/bevel斜角/round圆角
ctx.lineCap = “round”; 定义线段末端的样式。
ctx.moveTo(x,y); 将画笔抬起点到(x,y)处
ctx.line(x,y); 将画笔移到(x,y)处
ctx.rect(x,y,w,h); 绘制矩形的路径，需要再定义绘制为矩形框还是矩形填充
ctx.arc(x,y,r,degStart,degEnd,dir);绘制圆的路径
ctx.arcTo(x1,y1,x2,y2，r); 绘制扇形路径,两个坐标，一个半径
需要结合moveTo(x,y)使用，(x,y)点为该圆的起始点；(x1,y1)控制点；(x2,y2)结束点
ctx.quadraticCurceTo(cp1x , cp2y , x , y); 二次贝塞尔
结合moveTo(x,y)使用，(x,y)起始点；(x1,y1)控制点；(x2,y2)结束点。必须经过起始点和终点
ctx.bezierCurveTo(cp1x ,cp1y ,cp2x ,cp2y ,x ,y); 三次贝塞尔
结合moveTo(x,y)使用，(x,y)起始点；(x1,y1)控制点；(x2,y2)控制点；(x3,y3)结束点。必须经过起点和终点。
ctx.beginPath(); 清除路径容器
ctx.closePath(); 闭合路径，ctx.fill();是自动闭合。ctx.stroke()是手动闭合。
ctx.save(); 将画布当前状态（样式相关 变换相关）压入到样式栈中
ctx.restore(); 将样式栈中栈顶的元素弹到样式容器中，图像最终渲染依赖于样式容器
ctx.translate(x,y); 将原点按当前坐标轴位移x,y个单位
ctx.rotate(弧度); 将坐标轴按顺时针方向进行旋转
ctx.scale(); 缩放指定图像
放大时，是放大画布，将画布中的一个css像素所占据的物理面积变大，画布包含的css像素个数变少
画布中图像中所包含的css像素的个数不变
缩小时，是缩小画布，将画布中的一个css像素所占据的物理面积变小，画布包含的css像素个数变多
画布中图像中所包含的css像素的个数不变
文本相关
ctx.measureText(“文本”);
返回一个持有文本渲染宽度的对象
ctx.fillText(text,x,y);
在(x,y)位置填充指定的文本
ctx.strokeText(text,x,y);
在(x,y)位置绘制文本边框
ctx.font = “10px sans-serif”;
指定绘制文本的样式，font属性在指定时，必须有大小和字体
ctx.textAlign = “left/right/center”;
指定文本对齐方式。
ctx.textBaseline = “top/middle/bottom”;
指定文本基线对齐的方式
阴影相关(文本阴影&盒模型阴影)
ctx.shadowOffsetX = float;
用来设定阴影在 X 轴延申距离，默认为0，浮点型数据
ctx.shadowOffsetY = float;
用来设定阴影在 Y 轴延申距离，默认为0
ctx.shadowBlur = float;
设定阴影的模糊程度
ctx.shadowColor = “color”;（必须项）
设定阴影颜色效果
背景图片
ctx.drawImage(img,x,y,w,h);
在canvas中引入图片一定要在图片加载完成之后在去操作
ctx.getImageData(x,y,w,h);
返回一个 Image 对象：
width：选中区域在横向上css像素的个数
height：选中区域在纵向上css像素的个数
data：数组，选中区域所有像素点的rgba信息，四个样式的取值都是0~255
ctx.putImageData(imgdata,x,y);
对场景进行像素数据的写入
ctx.createImageData(w,h);
返回一个 imgdata 对象，默认像素点的信息是 rgba(0,0,0,0);
ctx.globalAlpha = value;
设置canvas中所有图形的透明度，[0~1];
ctx.globalCompositeOperation = “source-over”;
覆盖合成
source-over (默认值)，源在上面，新的图像层级比较高
source-in 只留下源与目标的重叠部分(源的那一部分)
source-out 只留下源超出目标的部分
source-atop 去除源溢出的部分
destination-over 目标在上面，就图像层级比较高
destination-in 只留下源与目标的重叠部分（目标的那一部分）
destination-out 只留下目标超出源的部分
destination-atop 去除目标溢出的部分
ctx.ispointinpath(x,y);
x,y这个点是否在路径上