JS关于canvas画布小笔记

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);