2019-03-21

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)

图片放在canvas中

做一个人物的自动动画

*创建一个存储图片的空间

var img =new image()

img.src="路径" 加载图片资源位置

img.onload =function(){}  图片加载完成执行操作

setinterval（action(),200(多少毫秒)）每两百毫秒执行一次

xxx.clearrect(0(起始位置),0,w,h)

document.onkeydown =function(){}键盘绑定

e.keycode 键盘按键代码

做一个可以移动的人物