canvas

1.基本使用

let c = document.getElementById("main"); // 通过document获取标签元素
let ctx = c.getContext("2d");

ctx.fillStyle="#FF0000"; // 颜色
ctx.fillRect(0,0,150,75); // 从x是0y是0的坐标绘制长150宽75的矩形

ctx.moveTo(0,0); // 从x0y0开始绘制
ctx.lineTo(200,100); // 到x200y100结束

2.绘制圆

/** 绘制圆 */
let c = document.getElementById("main"); // 通过document获取标签元素
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke()

3.绘制文本

/** 绘制文本 */
let c = document.getElementById("main"); // 通过document获取标签元素
let ctx = c.getContext("2d");
// 实心
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
// 空心
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

4.渐变

let c = document.getElementById("main"); // 通过document获取标签元素
let ctx = c.getContext("2d");
/** 线性渐变 */
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

/** 径向渐变 */
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

5.画像

let c = document.getElementById("main"); // 通过document获取标签元素
let ctx = c.getContext("2d");
/** 画像(将图片放置到画板上) */
ctx.drawImage(img,10,10);