我知道的两个Canvas库 jsCsript库,说来也悲哀,项目中没有怎么用到,忘的差不多了,让笔记唤醒我的知识!自勉!
var canvas=document.getElementsByTagName(‘canvas‘)[0];
var cntx=canvas.getContext(‘2d‘);
cntx.fillRect(100,100,100,100);//在画布里以100,100为原点,以宽高100画正方形,填充默认黑色
绘制方块:
①fillRect(L,T,W,H);默认颜色是黑色 方块的起点 (L, T) 方块的宽高(W,H)
②strokeRect(L,T,W,H) 带边框的方块,默认1像素 黑色边框 ,显示不出来原因
设置绘图:可以修改默认的
①fillStyle:填充颜色 (绘制canvas是有顺序的) 先写谁 覆盖谁
var canvas=document.getElementsByTagName(‘canvas‘)[0];
var cntx=canvas.getContext(‘2d‘);
cntx.fillStyle=‘red‘;
cntx.fillRect(100,100,100,100);
②lineWidth:线宽度,是一个数值
cntx.lineWidth=20;
③strokeStyle:边线颜色
var canvas=document.getElementsByTagName(‘canvas‘)[0];
var cntx=canvas.getContext(‘2d‘);
cntx.strokeStyle=‘purple‘;
cntx.lineWidth=20;
cntx.strokeRect(100,100,100,100);
边界绘制:
①lineJon:边界连接点样式
-miter(默认) round(圆) bevel(斜角)
②lineCap:端点样式
-butt(默认) round(圆角) square(高度多出为宽一半的值)
var canvas=document.getElementsByTagName(‘canvas‘)[0];
var cntx=canvas.getContext(‘2d‘);
cntx.lineCap=‘round‘;
cntx.moveTo(200,200);
cntx.lineTo(400,400);
cntx.lineWidth=20;
cntx.stroke();
绘制路径:
①beginPath:开启绘制路径
②closePath:结束绘制路径
③moveTo:移动到绘制的新目标点
④lineTo:新的目标点
cntx.beginPath();
cntx.moveTo(100,100);
cntx.lineTo(200,100);
cntx.stroke();描边 默认是黑色
........画三角形.........
cntx.beginPath();
cntx.moveTo(100,100);
cntx.lineTo(200,100);
cntx.lineTo(200,200);
cntx.closePath();
cntx.stroke();
绘制路径 2
①stroke :画线,默认是黑色
②fill:填充:默认是黑色
③rect:矩形区域
④clearRect:删除一个画布的矩形区域
⑤save:保存路径
⑥restore:恢复路径
例1:鼠标画线
例2:方块移动
针对不同的作画 要有不同的开启和闭合
var canvas=document.getElementsByTagName(‘canvas‘)[0];
var cntx=canvas.getContext(‘2d‘);
cntx.beginPath();
cntx.rect(200.5,200.5,100,100);
cntx.stroke();
cntx.closePath();
cntx.clearRect(0,0,canvas.width,canvas.height);
绘制之前要把之前的绘制清除掉 再绘制出来的就连贯起来
cntx.save();//保存开始
cntx.beginPath();
cntx.fillStyle=‘red‘;//如果没有cntx.save();cntx.restore();这两句,上下两个三角形都是填充红色了
//有了这两句就只有上一个三角形填充红色 后面一个三角形不受影响
cntx.moveTo(100,100);
cntx.lineTo(200,100);
cntx.lineTo(200,200);
cntx.closePath();
cntx.fill();
cntx.restore();//恢复
cntx.beginPath();
cntx.moveTo(200,100);
cntx.lineTo(300,100);
cntx.lineTo(400,200);
cntx.closePath();
cntx.fill();
绘制圆:
arc(x,y,半径,起始弧度,结束弧度,旋转方向);
-x,y:起始的位置
-弧度与角度的关系:弧度=角度*Math.PI/180 数学里π=PI
-旋转方向:顺时针默认:false 逆时针(true)
-例子:用arc画个钟表
//绘制其他曲线:
arcTo(x1,y1,x2,y2,r)
-第一组坐标 第二组坐标 半径
quadraticCurveTo(dx,dy,x1,y1)
-贝塞尔曲线:第一组控制点 第二组结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
- 贝塞尔曲线:第一组控制点 第二组控制点 第三组结束坐标
变换:
①translate
-偏移:从起始点为基点,移动当前坐标位置
②rotate
-旋转:参数为弧度
-例子:旋转的小方块
③scale
-缩放例子:旋转加缩放的小方块
插入图片:
①等待图片加载完,再执行canvas操作
-图片预加载,在onload中调用方法
②drawlmage(olmg,x,y,w,h)
-oImg:当前图片x,y:坐标 w,h宽高
-例子:微博的图片旋转效果
③drawlmage(olmg,x1,y1,W,H,x,y,w,h)
-x1,y1 裁剪起始点
-W,H裁剪宽高
设置背景:
-createPattern(oImg,平铺方式)
-2参位:repeat repeat-x repeat-y no-repeat
渐变:
createLinearGradient(x1,y1,x2,y2);
-线性渐变:
-第一组参数:起始点坐标 第二组参数:结束点坐标
-addColorStop(位置,颜色) 添加渐变点
var canvas=document.getElementById("canvas"); 获取canvas
var cntx=canvas.getContext(‘2d‘); 从canvas身上设置2d内容范围；
var mygradient=cntx.createLinearGradient(30,30,300,300); 在2dcanvas内容范围内设置线性渐变的范围;
mygradient.addColorStop("0","red" );
mygradient.addColorStop("0.2","yellow" ); (0-1)的值确定颜色渐变排列顺序
......
......
cntx.fillStyle=mygradient; canvas身上设置2d内容范围填充线性渐变样式
cntx.fillRect(0,0,400,400); canvas身上设置2d内容范围填充线性渐变样式的范围
createRadialGradient(x1,y1,r1,x2,y2,r2);
-放射性渐变:
参数:第一个圆的坐标和半径 第二个圆的坐标和半径
文本:
①strokeText(文字,x,y)
-文字边框
②fillText(文字,x,y)
-文字填充
③font
-文字大小和样式:‘60px impactt‘
④textAlign:文字的作业居中方式
-默认是start 根left一样的效果,end right center
⑤textBaseline:文字的上下居中方式
-文字上下的位置的方式:默认:alphabetic top middle bottom
文本2:
①measureText( )
-measureText(str).width;只有宽度 没有高度
-例子:文字居中
阴影:
①shadowOffsetX shadowOffsetY
-X轴偏移 Y轴偏移
②shadowBlur
-高斯模糊度
③shadowColor
-阴影颜色
alert(canvas.shadowColor);//默认颜色:黑色透明
四部分
canvas
像素
①getImgeData(x,y,w,h)
-获取图像数据
②putImgeData(获取图像,x,y)
-设置新的图像数据
③属性
-width:一行的像素个数
-height:一行的像素个数
-data:一个数组,包含每个像素的grba的四个值,注意:每个值都在0~255之间的整数
像素2:
①createImageData(w,h)
-生成新的像素矩阵,初始值就是全透明的黑色,即(0,0,0)
-像素显字
②获取和设置指定坐标
-封装:getXY setXY
③图片的像素操作
-必须是同源下
-例子:反色 倒影 渐变等
-例子:马赛克效果
canvas 第5部分
合成:
①全局阿尔法值
-globalAlpha
②覆盖合成
-源:新的图形
-目标:已经绘制过的图形
-globalCompositeOperation属性
》source-over destination-over source-atop
》source-atop source-in destination-in
》source-out destination-out linghter
》copy xor