Canvas 入门

1.Canvas 常用 api

获取 2d 上下文对象

let ctx = document.getElementById("canva").getContext("2d");

globalCompositeOperation

图形组合方式的设置

ctx.globalCompositeOperation = "destination-over";//新生成的图像在上方

填充和背景

// 3.设置背景填充色和边框色
ctx.fillStyle = "rgba(0,0,0,0.4)";
ctx.strokeStyle = "rgba(0,153,255,0.4)";

位移

// 5.设置位移
ctx.translate(150, 150);

旋转

旋转只传入一个参数：旋转的角度

// 6.1 地球旋转
ctx.rotate(
    ((2 * Math.PI) / 60) * time.getSeconds() +
    ((2 * Math.PI) / 60000) * time.getMilliseconds()
);

画一幅天文图