JavaScript canvas
canvas
绘制图形，结合逻辑整理动画效果，页面柱状图等
基本操作
1.xxx=document.queryselector('canvas') 获取canvas元素
设置宽高，最好在内部设定
2.ss=xxx.getcontext('2d') 获取2d工具
这样基本环境设置完成了
3.move to(,) 从哪个坐标开始
lineto(,) 到哪个坐标结束
ss.stroke() 最后描边来显示出来
在进行移动时，可以通过
ss.beginpath() 开始路径
ss.closepath() 关闭路径来完成
有虚影可以通过+-0.5完成
工具样式
线宽设置：ss.linewidth=?
ss.linecap(线末端类型) butt默认 round 圆 square 方形
ss.linejoin(相交线焦点) miter默认 round yuan bevel 切除
ss.strokestyle 描边样式
ss.fillstyle 填充后颜色或样式
ss.fill 填充
rect(x,y,w,h) 没有独立路径画矩形
ss.clearrect 清楚矩形区域
ss.fillrect 有独立路径的填充矩形
ss.strokerect 描边矩形
非零环绕规则
顺时针+1 false
逆时针-1 true
当计数为0不填充
坐标系绘制
可以通过数组来进行空间存储的方法
如data=[i]
data[i]={x,y}
获取x和y值
data[i].x 获取x值
data[i].y获取y值
*var x=e.ffsetx 获取鼠标点击时的x坐标
var y=e.ffsety 获取鼠标点击时的y坐标
canvas文本
ctx.measuretext 测文字长度
ctx.filltext(str,x,y) 点在左下
ctx.font(大小，字体)
ctx.textalign(文本方向) 默认，居中，等
ctx.textbaseleight (基线)
canvas圆弧
格式为: xxx.arc(圆心x，圆心y，半径，开始角度，结束角度一般为math.pi*2，false(顺时针) or true(逆时针))
绘制图形和动画
三个参数 xxx.drawimage(img,x(开始的x位置),y(开始的y位置))
五个参数 xxx.drawimage(img,x,y,w(宽),h(高))；图片会失真
*九个参数drawImage(image,imageX,imageY,imageWidth,imageHeight,canvasX,canvasY,canvasWidth,canvasHeight)
*创建一个存储图片的空间
var img =new image()
img.src="路径" 加载图片资源位置
img.onload =function(){} 图片加载完成执行操作
setinterval（action(),200(多少毫秒)）每两百毫秒执行一次
xxx.clearrect(0(起始位置),0,w,h)
document.onkeydown =function(){}键盘绑定
e.keycode 键盘按键代码
