Canvas 入门前端

1.Canvas 常用 api
获取 2d 上下文对象

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

globalCompositeOperation 图形组合方式的设置

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

【Canvas 入门】

文章图片

填充和背景

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

画一幅天文图

Document - 锐客网

Canvas 入门