One Hundred Years of Solitude

扬帆,启航!

canvas笔记

我知道的两个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();

①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

点赞

发表评论

电子邮件地址不会被公开。