canvas设置宽高和样式
< canvas width=“400” height=“600” style=“border:1px solid #ff0” >< /canvas >
获取画布
var canvas = document.getElementsByTagName(‘canvas’)[0];
操作画布上下文
var context = can.getContext(‘2d’);
重新开始绘制路径
context.beginPath();
绘制起点 有两个参数 起点的x,y点坐标
context.moveTo(0,0);
绘制下一个点 有两个参数 下一个点的x,y点坐标
context.lineTo(200,200);
链接起点和终点
context.colsePath();
绘制线条宽度
context.lineWidth = 5;
绘制线条样式
context.strokeStyle="#f00";
绘制
context.stroke();
填充样式
context.fillStyle = ‘#f0f’;
填充
context.fill();
绘制矩形 四个参数 起始 x y 坐标 宽 高
context.rect(100,100,300,400);
绘制圆形
前两个参数 圆心坐标
第三个参数 半径
第四个参数和第五个参数 开始和结束角度 Math.PI=180°
第六个参数 一个布尔值 true逆时针 false顺时针
context.arc(100,100,100,0,-Math.PI*3/2,true);
绘制文字
context.strokeText(‘韭菜馅包子’,100,100);
设置阴影
context.shadowColor = ‘#000’;
设置阴影范围
context.shadowBlur = 15;
设置阴影偏移量
context.shadowOffsetX = 50;
context.shadowOffsetY = 100;
清除画布
context.clearRect(0,0,canvas.width,canvas.height);
平移画布坐标 整个画布的平移
context.translate(200,200);
旋转画布坐标 顺时针旋转
context.rotate(Math.PI/3);
缩放画布坐标
context.scale(0.5,1.5)