canvas

#canvas API


## 基础设置
#### 画线画规则图形

- moveTo(a,b)      　　　　　　　　　//把路径移动到画布中的指定点  
- lineTo(a,b)  　　　　　　　　　　//创建从该点到路径当前位置的线条
- rect(sX,sY,width,height) 　　　　//画矩形，起始位置(x,y）
- arc(sX,sY,r,sAng,eAng,dir) 　　 //画圆，起始位置(x,y)；r=>半径；sAng,eAng=>起始,结束角度；dir默认false顺时针 
- arcTo(sX,sY,eX,eY,r)　　　　　//画弧线
- fillStyle　　　　　　　　　　//填充颜色、渐变、模式
- strokeStyle 　　　　　　　　//描边颜色、渐变、模式
- lineWidth 　　　　　　　　 //线条宽度


#### 线条端点
- lineCap　　　 　　　　　　　  //round butt(默认平直) square                   
- lineJoin　　　      　　 　　　 //round miter(默认尖角) bevel(斜角)
- miterLimit　　　  　　　　　  //最大斜接长度 lineJoin为miter时起作用，斜接长度大于limit值会以bevel显示


#### 图片
- drawImage(ImageData,x,y,width,height) 　　  　　　　       　　　　  //width height 可省
- drawImage(ImageData,sx,sy,swidth,sheight,x,y,width,height) 　　　//截取img源的部分进行展示
- createImageData(width,height)     　　　 　　    　　　　　 　　　 //创建新的空白 ImageData 对象
- getImageData(x,y,width,height)         　　　　　   　　  　　 　　　 //复制画布内容
- putImageData(ImageData,x,y)          　　　　　      　　　　　　　 //把图像数据放到画布
- createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")　 　　 //在指定的方向内重复指定的元素


#### 动画
- scale(width,height)            　　　　　　　　//缩放
- rotate(angle)                  　　　　　　　　　//旋转
- translate(x,y)                 　　　　　　　　　//平移   
- transform(hs,hr,vr,vs,ht,vt)   　　　　　　　//变换，参数:水平缩放/水平倾斜/垂直倾斜/垂直缩放/水平移动/垂直移动
- setTransform(hs,hr,vr,vs,ht,vt)　　　　　　//在初始位置变换 不受其他影响 
- save()       　　　　　　　　　　　　　　//防止叠加变换,需要存储此状态,变换完成之后restore一下恢复到此状态


#### 贝塞尔曲线
- quadraticCurveTo(cpx,cpy,ex,ey)       　　　　　//控制点 结束点
- bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)　　　//控制点1，控制点2，结束点


#### 文本
- font
- textAlign
- textBaseline
- fillText(text,x,y,maxwidth)     　　　　　　//maxwidth最大宽度 可选
- strokeText(text,x,y,maxwidth)   　　　　　//描边文字
- measureText(text)               　　　　　　　//返回对象，该对象包含字体宽度;在文本向画布输出之前，了解文本的宽度时用


#### 渐变
- createLinearGradient(sx,sy,ex,ey)      
- createRadialGradient(sx,sy,sr,ex,ey,er)
- addColorStop()                        　　　　　　　　　　　 //指定渐变断点和色值



## 基础方法
- beginPath()                   　　　　 　　　　　　//beginPath是开始新的路径
- closePath()                   　　　　 　　　　　　//closePath是闭合现有路径 而不是关闭路径 与beginPath无关
- fill()                         　　　　　　　　　　　　　//填充
- stroke()                       　　　　　　　　　　　//描边
- strokeRect(sX,sY,width,height) 　　　　　　//绘制矩形
- fillRect(sX,sY,width,height)   　　　　　　//绘制填充矩形
- clearRect(sX,sY,width,height)  　　　　　//清除指定区间画布
- clip() 　　　　　　　　　　　 　　　　　//裁切原始画布，一旦剪切某个区域，则所有之后的绘图都会被限制在被剪切的区域内
- save()      　　　　　　　　　　　　　　//保存当前环境的状态
- restore()        　　　　　 　　　　　　　//返回之前保存过的路径状态和属性
- toDataURL()           　　　　　 　　　　//将内容转换为图片,返回画布数据，默认类型为 image/png

<canvas id = 'canvas"></canvas>

<script>

var canvas = document.getElementById("canvas");

canvas.width = 800;      

canvas.height = 800;

var context = canvas.getContext('2d');

draw(context,100,300,#333,#000,10);传参

function(context,x,y,color,color2,line){}封装

context.lineWidth=10;

context.beginPath(); 

context.moveTo(100,100)；

context.lineTo(300,300);

context.fillStyle='yellow';//状态定义

context.strokeStyle="#333";

context.lineCap = 'butt';   //定义线段开始结尾处多出圆形‘帽子‘/square（突出正方形）/round（突出圆形）/butt(没有突出）

context.lineJoin =miter '';   //定义线段交接出是尖锐效果/round圆形/bevel斜交 跟折纸似得

context.miterLimit = 10；   //内角和外角之间的最大值，超过就是bevel，默认用10

context.fill();     //绘制，fill填充要在描边之前 否则描边会被填充色覆盖一半

context.stroke();

context.closePath();   //首尾相接，封闭，避免缝隙

context.beginPath();   //绘制新的路径 避免strokeStyle覆盖

context.rect(100,100,300,300); //rect(x,y,width,height)规划路径

context.strokeStyle="#000";

context.stroke();

context.closePath();

context.beginPath();   //绘制新的路径 避免strokeStyle覆盖

context.fillRect(100,100,300,300); //fillRect(x,y,width,height)规划路径并绘制

context.strokeRect(100,100,300,300); //strokeRect(x,y,width,height)规划路径并绘制

context.closePath();

canvas 图形变换translate,rotate,scale是叠加的，所以在变换之前context.save(); 保存状态；变换之后context.restore()；恢复到之前保存的状态

scale不仅放大大小 边框宽度，初始位置也会变大，0除外

变换矩阵transform

context.arc(centerX,centerY,radius,startDeg,endDeg,direction);  //默认方向为false，顺时针

context.arc(50+i*100,40,40,0,2*Math.PI*(i+1)/10);

context.arc(50+i*100,40,40,0,2*Math.PI*(i+1)/10,true);

//drawimage

var img = new Image();

img.onload = function(){

ctx.drawImg(img,0,0);

}

img.src = 'arrow.jpg';//或者以data:url的格式：

img.src = 'data:image;base64,xxxxxYYYssweq/sdfdaaaa图片编码aaaa'

PS:

data:URL图片编码的优势是：可以即时获取不需要从服务器请求，而且可被封装在一个文件中，所有js css Html访问更方便，缺点是无缓存；当图片过大时编码很长不适用。如何生成：命令行找到文件位置，输入：uuencode -m arrow.jpg remotename 生成如下：

begin-base64 644 remotename

iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAMAAABMdmLnAAAAbFBMVEUAAAAlGRYjGRZBQUEkGRUt

Hh4kGBUkGRYlGhckGhUjGBUlGxgkGBYjGBUjGBYjGBUkGBYkGRYkGBYkGRYzJiYkGBUkGRYjGhYl

GhYlGhUlGhgqHxojGRUkGBUjGBYkGRYjGRYjGBYjGhojGBW/oNWdAAAAI3RSTlMAZ5gDzRGp+Ut3

/Sn04sbtuYprWwatlYJ1UzoY2tfRr66fHS9J7soAAADJSURBVFjD7dBJDoJAFITh0lbRbiYBlcG5

7n9HFTaSuDCRSly8/wBfKoV/zIXgoMnVMRkfKii6sm+xxPSVpE7PKdQTCvUzhfqeQr3LlPo6Mt10

00033XTT1Xoo9vPfyz3fOg16tfUUlN3xbEtNCYDgKaoGZlSVyl4ZfimpKge6mJp8A6CgphSvyoyC

Fg59VTuboN3I3jlM2GZkr8w222yzzTbb7A8VQjtEOhsroY2j0EYitHER2mi9zgYO7Ls5KFqncZQ2

UOW+WP0ABR3SbabLsJoAAAAASUVORK5CYII=

====

中间部分即是生成的图片编码。

</script>

canvas锯齿可在画图前清空画布：context.clearRect(0,0,180,180);