H5 画图 canvas

【canvas】

画图

和img类似

兼容性高级浏览器

canvas里面想要画画必须用js配合

//1、准备一直笔

var gd=oC.getContext('2d');//画笔

//2、把笔移动到起始位置

gd.moveTo(306,237);

//3、划线（选区，看不到需要描边或者填充）

gd.lineTo(401,85);

//闭合路径

gd.closePath(); //收尾直接连接起来

//描边颜色(先选颜色再描边)

gd.strokeStyle='red';

//线宽(里外同时扩展)

gd.lineWidth=30; //不写单位

//填充的颜色

gd.fillStyle='blue';

//5填充

gd.fill();

//4、描边

gd.stroke();

注：先填充在描边和先描边再填充效果不一样

如果想画新的东西，创建一个新的路径

gd.beginPath() //把之前的效果屏蔽了

画画的流程；

gd.beginPath()

理论上：可以话任何东西

随机生成一堆点连成线

--------------------

画一个矩形

1)moveTo()  lineTo()

2)gd.strokeRect(x,y,w,h)  //自带的画矩形

//填充的矩形

gd.fillRect(100,100,200,100);

例子：简易柱状图

[300,200,50,80,250,800]

call

fn.call(this的指向，参数，参数)

apply

fn.apply(this的指向，[参数，参数])

-------------------------

canvas运动

先清后画

gd.clearRect(0,0,oC.width,oC.height);

帧频 60fps

低帧频 30

高帧频 1000/60  16 17

canvas性能极高

例子：屏保

注：点动，速度

作业：变颜色

----------------------

圆

gd.arc(cX,cY,r,起始的角度，结束的角度，是否逆时针)

弧度        弧度

gd.stroke();

圆弧

角度转成弧度

360 2PI

180 PI

1  PI/180

n  n*PI/180

function d2a(n){

return n*PI/180

}

注：起始点在右边

画饼的步骤

gd.arc(200,200,100,d2a(0),d2a(30),false); //先画圆弧

gd.lineTo(200,200); //链接到中心

gd.closePath(); //闭合线路

gd.stroke();//描边

画饼状图

[200,100,300,50,30]

进度条

信号器

表