canvas学习总结

canvas的兼容

对于不兼容canvas的浏览器，即使使用html5shiv.js插件也没有用，不支持就是不支持在css样式中设置的canvas的大小实际上是对于原本默认300*150大小的画布及其内容进行缩放。想要调整画布大小但是不缩放绘制的内容，就应该在html代码中直接设置宽高。

获取canvas宽高的两种方法

$(DOM元素).width $(DOM元素).heightctx.canvas.width ctx.canvas.height

API----绘制线条

什么是‘非0环绕’？ canvas绘图中交叉路径的填充问题，依据非零环绕原则，由顺、逆时针穿插次数决定是否填充某一区域

非零环绕原理 判断有自我交叉情况的路径时，对于路径中的任意给定区域，从该区域内部任意找一个点作为起点，画一条足够长的线段，使此线段的终点完全落在路径范围之外。然后，初始化计数器为0，每当这条线段与路径上的直线或曲线相交时，就改变计数器的值。如果是与路径的顺时针部分相交，则加1，如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill方法时，浏览器就会对其进行填充。如果最终值时0，那么此区域就不在路径内部，浏览器就不会对其进行填充

var ctx = canvas元素.getContext(“2d”); 获取画布的上下文对象，暂时没有3d，想要绘制3d图形(用于游戏)需要使用 web gl 网页技术 上下文对象中有许多用于绘图的属性和方法：（长度相关的数值都不带单位）moveTo(xPosition,yPosition) 将画笔移动到起点lineTo() 绘制轨迹到该点stroke() 轨迹描边strokeStyle 用于设置字符串类型的轨迹描边的颜色fill() 对于“非0环绕”的闭合空间进行填充fillStyle 用于设置字符串类型的填充颜色 再次绘图时，对于没有开启独立路径就直接进行再次绘图，每次再次使用描边或填充都会再次使用到之前绘制的图形上，其颜色会被后设置的颜色覆盖beginPath() 开始新的路径（开启独立路径）closePath() 自动将起点与终点进行闭合关于线条的问题 1.默认的宽度是多少 1px 但实际看起来比1px宽2.默认的颜色是什么 黑色 但实际看起来比黑色浅 产生原因： 对齐的点是线的中心位置 会把线分成两个0.5px，但是由于浏览器默认最小显示宽度为1px，所以canvas显示的是会不饱和增加宽度解决方案： 将线条沿垂直于线条的方向向上或向下移动0.5pxlineWidth 用于设置线条的宽度lineCap 用于设置线条两端的形状，butt 默认的平头，square 方头，round 圆头lineJoin 用于设置线条拐点的形状，miter 默认的尖拐点，bevel 像是被切了一刀的平拐点，round 圆拐点setLineDash([5,10,15]) stroke之前设置这个属性，可以绘制虚线，数组中的参数分别于实线、空格的循环顺序进行对应，设置其长度getLineDash() 返回所绘制的虚线图形的用于重复部分的图像，对应的长度数组。如果 setLineDash([5,10,15]) 则返回数组 [5,10,15,5,10,15]lineDashOffset 用于设置虚线的偏移量，如果是正的值则往后(绘制的起点方向)偏移，如果是负的值则往前(绘制的终点方向)偏移

API----矩形绘制

rect(x,y,w,h) 绘制没有独立路径的矩形轨迹（不自动描边或填充）strokeRect(x,y,w,h) 有独立路径，不影响别的绘制，自动描边fillRect(x,y,w,h) 有独立路径，不影响别的绘制，自动填充clearRect(x,y,w,h) 绘制一个矩形区域，用于擦除这个区域内的所有图案

API----渐变颜色

var LG=ctx.createLinearGradient(x0,y0,x1,y1) 创建一个线性渐变对象，渐变的范围和方向为从点(x0,y0)到点(x1,y1)LG.addColorStop(0~1的数值，颜色字符串) 用于添加指定位置的颜色 可以将LG渐变对象赋值给fillStyle属性或strokeStyle属性，用于绘制渐变线条和渐变图形 createLinearGradient(x0,y0,r0,x1,y1,r1) 创建一个放射性的线性渐变对象，点(x0,y0)为圆心r0为半径的地方开始渐变，到点(x1,y1)为圆心r1为半径的地方结束渐变createRadialGradient(x0,y0,r0,x1,y1,r1) 创建一个径向渐变对象

API----绘制圆弧

ctx.arc(x,y,r,startAngle,stopAngle,false)—最后一个参数，false表示顺时针绘制（默认参数），true表示逆时针绘制如果想要绘制扇形，首先需要将画笔移动到圆心 ctx.moveTo(x,y); ctx.arc(x,y,r,startAngle,stopAngle,false); ctx.closePath(); ctx.stroke(); ctx.fill();

API----绘制文本

ctx.font=“20px Arial”; 与css的font属性的设置一样，主要设置字号和字体ctx.textAlign — 设置文字基于绘制点的对齐方式，取值有left center right start（默认） endctx.textBaseline — 设置文字的垂直对齐方式，取值有top middle bottomctx.measureText().width — 获取文字的宽度（基于文本的字体大小），因此 ctx.font 的设置要在此语句之前

API----绘制图片

drawImage() ,它的第一个参数可以是图片对象，canvas对象以及video对象drawImage(img,x,y) — x,y 表示在画布中的作图起点，绘制完整的图片drawImage(img,x,y,w,h) — w,h 表示绘制的完整图片的大小（图片缩放，而不是图片截取）drawImage(img,x0,y0,w0,h0,x,y,w,h) — x0,y0,w0,h0 表示在图片中截取的区域，x,y,w,h 表示画布中绘制图片的区域（对截取到的图片按照绘制区域大小进行缩放）在绘制图片(或canvas/video)之前，必要先加载好图片(或canvas/video)资源 var img=new Image(); 或 var img=document.createElement("img"); img.onload=function(){ 其他代码 drawImage() 其他代码 } img.src=src; // 必须要先绑定图片加载完成的事件，再设置图片的src属性

API----变换坐标轴及左上角的原点

变换坐标轴及原点 — 只对在该变换之后绘制的图形有效

translate(x,y) — 表示将坐标系移动到坐标原点为 x,y 的位置scale(x,y) — 表示对坐标轴横纵的缩放比例rotate(angle) — 表示将坐标系顺时针旋转angle角度