1. Canvas介绍
Canvas 是 HTML5 新特性，它是一个可以使用 JavaScript 绘制图形的 HTML 元素。通过 Canvas，开发者可以在网页上动态生成图形、图像以及进行实时动画的展示。Canvas 提供了一套完整的绘图 API，使开发者能够创建各种复杂的图形，包括线条、矩形、圆形、文字等等
`
2.需求概括
- 实现一个Canvas画布中可进行多个图形的绘画，且
各图形之间互相独立互不影响，并记录前面绘画的图像的路径以及在下一次的绘画中回显前面的绘制的内容
3.所涉及到的Api解释
- ctx.getContext('2d') ： 用于获取一个用于在 Canvas 上绘图的 2D 渲染上下文对象。通过这个Api获取到的上下文对象，可以使用其提供的方法和属性来在 Canvas 上进行绘图操作
- ctx.clearRect(x, y, width, height) ： 用于
清除指定区域的内容，它会在指定的矩形区域内绘制一个透明的矩形，从而达到清除内容的效果 - ctx.beginPath() ：
开一条新的路径这一步在绘制每个新的图形之前调用，以确保每个图形都是独立的路径 - ctx.closePath() ：
闭合当前路径这一行代码用于将路径的起点和终点连接起来，形成一个封闭的图形 - ctx.fillStyle = '' ： 设置填充样式颜色
- ctx.fill() ： 使用当前填充样式填充路径的内部区域
- ctx.strokeStyle = '' ： 设置描边样式颜色
- ctx.lineWidth = n ： 设置描边线条的宽度为n像素
- ctx.stroke() ： 对路径进行描边，使用当前的描边样式
- ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) ： 绘制了一个圆形，圆心的位置由
operation.x和operation.y指定，半径为radius，起始角度为endAngle，结束角度为anticlockwise(Math.PI * 2)，即绘制完整的圆
4.代码实现
- HTML部分
<canvas id="myCanvas" width="600" height="400"></canvas>
- CSS部分
#myCanvas { background-color: gainsboro; margin: 20px; box-shadow: 0px 0px 5px #ccc; border-radius: 8px; position: absolute; top: 66px; left: 66px; }
- JavaScript部分
const
const ctx = canvas.getContext('2d');
let operations = []; //保存当前绘制的坐标点
let previousOperations = []; //保存之前绘制的坐标
let shapes = []; //保存图形信息（功能可拓展）
//声明redraw()函数便于复用
function redraw() {
// 清除整个canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制以前绘画的内容
previousOperations.forEach((previousOperation) => {
ctx.beginPath();
previousOperation.forEach((operation, index) => {
if (index === 0) {
ctx.moveTo(operation.x, operation.y);
} else {
ctx.lineTo(operation.x, operation.y);
}
});
ctx.closePath();
ctx.fillStyle = 'rgba(38,219,111, 0.5)';
ctx.fill();
ctx.strokeStyle = '#199D33';
ctx.lineWidth = 5;
ctx.stroke();
});
// 绘制当前绘画的内容
ctx.beginPath();
operations.forEach((operation, index) => {
if (index === 0) {
ctx.moveTo(operation.x, operation.y);
} else {
ctx.lineTo(operation.x, operation.y);
}
});
ctx.closePath();
ctx.fillStyle = 'rgba(38,219,111, 0.5)';
ctx.fill();
ctx.strokeStyle = '#199D33';
ctx.lineWidth = 5;
ctx.stroke();
// 绘制所有操作的点
ctx.fillStyle = 'red'
operations.forEach(operation => {
ctx.beginPath();
ctx.arc(operation.x, operation.y, 3, 0, Math.PI * 2);
ctx.fill();
});
}
//给Canvans添加点击事件
canvas.addEventListener('click', function(event) {
//获取鼠标点击的x，y坐标
const x = event.offsetX;
const y = event.offsetY;
// 保存操作
operations.push({x, y});
// 保存图形信息（功能可拓展）
shapes.push({
path: operations,
});
redraw();
});
//点击鼠标右键停止绘画
canvas.addEventListener('contextmenu', function(event) {
event.preventDefault();
previousOperations.push([...operations]); //使用二维数组保存多个图形坐标
operations = [];
redraw();
});效果实现 :
JavaScript代码链接
注意--本文章为学习分享为主，如有解释不正确的地方，各位大佬可给我指出，谢谢~