canvas画布基础知识总结

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)