canvas学习总结

canvas学习总结

canvas的兼容

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

获取canvas宽高的两种方法

• $(DOM元素).width
  $(DOM元素).height
• ctx.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.5px
• lineWidth 用于设置线条的宽度
• 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（默认） end
• ctx.textBaseline — 设置文字的垂直对齐方式，取值有top middle bottom
• ctx.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角度