JS画布笔记
1、 实现画布
var canvas = document.getElementById(“mycanvas”);
var ctx = canvas.getContext(“2d”);
2、绘制圆弧
ctx.arc(x,y,r,起始角,结束角,顺逆时针绘制);
- 圆心坐标(x,y)
- 半径r
- 起始角-结束角范围:0-Math.PI*2
- 顺时针绘制:false
- 逆时针绘制:true
3、绘制直线
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
- 起点坐标(x1,y1)
- 终点坐标(x2,y2)
- 将两点连接:stroke();
4、绘制矩形
填充矩形
ctx.fillRect(x,y,width,height);
矩形框框
ctx.strokeRect(x,y,width,height);
5、避免画的图形连接在一起
ctx.beginPath();
ctx.closePath();
6、填充
ctx.fill();
7、设置填充颜色
ctx.fillStyle=“red”;
8、设置透明度
ctx.globalAlpha=0.5;
9、状态的保存与恢复
ctx.save(); //保存当前canvas状态
ctx.restore();//返回最后保存的canvas状态
10、将坐标原点移动
示例:
ctx.translate(250,200);
表示将坐标原点(x=0,y=0)移动了250和200,
即坐标原点改变为(250,200)。
11、旋转
ctx.rotate(30*Math.PI/180);