Canvas

认识

Canvas 允许开发者直接操作图像的像素数据，从而实现了在浏览器端绘制复杂的图形和动画。Canvas 在游戏开发、数据可视化和图形设计等领域被广泛使用。

基本使用

找到画布，获取DOM元素
1
let c1 = document.getElementById('id')
获取画笔上下文
1
let ctx = c1.getContext('2d')

绘制图形

1 2	// 这里绘制一个矩形 fillRect(x,y,宽度,高度) ctx.fillRect(100,200,300,300)

canvas栅格

canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素（坐标为（x,y））。

Canvas绘制基本图形

矩形

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

ctx.fillStyle = 'blue'; // 设置填充颜色  
ctx.fillRect(50, 50, 100, 100); // 绘制一个左上角坐标为 (50,50) 宽高为 100x100 的蓝色矩形

园型

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

ctx.fillStyle = 'red'; // 设置填充颜色  
ctx.beginPath();  
ctx.arc(150, 150, 50, 0, 2 * Math.PI); // 绘制一个圆心坐标为 (150,150) 半径为 50 的红色圆形  
ctx.fill(); // 填充图形

线条

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

ctx.strokeStyle = 'green'; // 设置线条颜色  
ctx.lineWidth = 2; // 设置线条宽度  
ctx.beginPath();  
ctx.moveTo(200, 200); // 设置起点坐标  
ctx.lineTo(300, 200); // 设置终点坐标
ctx.stroke(); // 绘制线条

三角形

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

ctx.fillStyle = 'yellow'; // 设置填充颜色  
ctx.beginPath();  
ctx.moveTo(100, 100); // 设置第一个顶点坐标  
ctx.lineTo(150, 150); // 设置第二个顶点坐标  
ctx.lineTo(50, 150); // 设置第三个顶点坐标  
ctx.closePath(); // 连接第三个顶点和第一个顶点，形成闭合路径  
ctx.fill(); // 填充三角形

圆弧

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

ctx.strokeStyle = 'purple'; // 设置线条颜色  
ctx.lineWidth = 2; // 设置线条宽度  
ctx.beginPath();  
ctx.arc(200, 200, 50, Math.PI, 2 * Math.PI, false); // 绘制一个圆心坐标为 (200,200) 半径为 50 的紫色圆弧，起点角度为 PI，终点角度为 2*PI，逆时针方向  
ctx.stroke(); // 绘制圆弧

曲线

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

ctx.strokeStyle = 'orange'; // 设置线条颜色  
ctx.lineWidth = 2; // 设置线条宽度  
ctx.beginPath();  
ctx.moveTo(250, 250); // 设置起点坐标  
ctx.quadraticCurveTo(300, 200, 350, 250); // 使用二次贝塞尔曲线绘制曲线，控制点为 (300,200)，终点为 (350,250)  
ctx.stroke(); // 绘制曲线

特殊图形

绘制折线

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

// 定义折线的坐标点  
const points = [  
  { x: 100, y: 100 },  
  { x: 150, y: 50 },  
  { x: 200, y: 100 },  
  { x: 250, y: 50 },  
  { x: 300, y: 100 }  
];  

// 开始绘制折线  
ctx.beginPath();  
ctx.moveTo(points[0].x, points[0].y); // 折线的起点坐标  
for (let i = 1; i < points.length; i++) {  
  ctx.lineTo(points[i].x, points[i].y); // 依次连接每个坐标点  
}  

// 设置折线样式  
ctx.strokeStyle = 'blue'; // 设置线条颜色  
ctx.lineWidth = 2; // 设置线条宽度  

// 绘制折线  
ctx.stroke();

五角星

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

const x = 150;  
const y = 150;  
const radius = 50;  

ctx.fillStyle = 'purple'; // 设置填充颜色  
ctx.beginPath();  
for (let i = 0; i < 5; i++) {  
    ctx.lineTo(Math.cos((Math.PI * 2 * i) / 5) * radius + x, Math.sin((Math.PI * 2 * i) / 5) * radius + y);  
    ctx.lineTo(Math.cos((Math.PI * 2 * (i + 0.5)) / 5) * radius / 2 + x, Math.sin((Math.PI * 2 * (i + 0.5)) / 5) * radius / 2 + y);  
}  
ctx.closePath();  
ctx.fill();

心型

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

const x = 150;  
const y = 150;  
const radius = 50;  

ctx.fillStyle = 'purple'; // 设置填充颜色  
ctx.beginPath();  
for (let i = 0; i < 5; i++) {  
    ctx.lineTo(Math.cos((Math.PI * 2 * i) / 5) * radius + x, Math.sin((Math.PI * 2 * i) / 5) * radius + y);  
    ctx.lineTo(Math.cos((Math.PI * 2 * (i + 0.5)) / 5) * radius / 2 + x, Math.sin((Math.PI * 2 * (i + 0.5)) / 5) * radius / 2 + y);  
}  
ctx.closePath();  
ctx.fill();

绘制一个笑脸

const canvas = document.getElementById('myCanvas');  
const ctx = canvas.getContext('2d');  

// 绘制脸部  
ctx.beginPath();  
ctx.arc(150, 150, 100, 0, 2 * Math.PI);  
ctx.fillStyle = 'yellow';  
ctx.fill();  

// 绘制左眼  
ctx.beginPath();  
ctx.arc(110, 130, 10, 0, 2 * Math.PI);  
ctx.fillStyle = 'black';  
ctx.fill();  

// 绘制右眼  
ctx.beginPath();  
ctx.arc(190, 130, 10, 0, 2 * Math.PI);  
ctx.fillStyle = 'black';  
ctx.fill();  

// 绘制嘴巴  
ctx.beginPath();  
ctx.arc(150, 160, 50, 0.2 * Math.PI, 0.8 * Math.PI);  
ctx.strokeStyle = 'black';  
ctx.lineWidth = 2;  
ctx.stroke();

Canvas

认识

基本使用

canvas栅格

Canvas绘制基本图形

arcTo方法