canvas

定义

canvas.getContext('2d');

paint.fillRect(); 填充矩形;

paint.strokeRect(); 轮廓矩形;

paint.lineWidth=1; 线宽

paint.clearRect(); 清除内容

绘制三角形

paint.beginPath();          //开始绘制新路径
paint.moveTo(10,10);        //设定路径的起始点
paint.lineTo(50,50);        //设定路径的宽高
paint.lineTo(40,20);        //设定第二条路径的宽高
paint.closePath();          //闭合路径
paint.lineCap='round';      //一条线末端为圆角
paint.lineCap='square';     //一条线末端增加一个正方形
paint.lineJoin='round';     //两条线的连接处为圆角
paint.lineJoin='miter';     //两条线的连接处为默认
paint.lineJoin='bevel';     //两条线的连接处为切角
paint.stroke();             //绘制图形

绘制圆

paint.arc(100,100,100,0,2*Math.PI,false); 顺时针画圆弧

paint.arc(100,100,100,0,2*Math.PI,true); 逆时针画圆弧

paint.stroke();

现行渐变

径向渐变

paint.createRadiusGrandient(0,0,,50,canvas.width,canvs.height,100)

画字体

paint.font='20px 宋体';

paint.strokeText();

paint.fillText();

paint.txetAlign='left';

paint.textStyle='red';

window.requestAnimationFrame(); 开启

与浏览器的刷新频率一样,功能与set interval一样,当浏览器失去焦点(不看浏览器的时候),就不会运行,当再次回到浏览器是,在此运行

window.cancelAnimationFrame(); 停止

你可能感兴趣的:(canvas)