使用canvas画布实现矩形的绘制（保留上一个绘制的矩形）

Billow_lamb

已于 2023-07-25 17:12:43 修改

阅读量1k

点赞数

文章标签： javascript 前端

于 2023-06-17 10:54:34 首次发布

本文链接：https://blog.csdn.net/Billow_lamb/article/details/131257779

版权

qq技术交流群:   306671879  一起努力

使用canvas画布实现矩形的绘制（保留上一个绘制的矩形）


 1.  鼠标按下，记录鼠标按下的位置，及绘制矩形的起点。
 2. 鼠标移动的时候，以起点为原点建立直角坐标系，然后分别讨论移动之后的鼠标点在四个坐标象限的情况。
 3. 鼠标弹起，清空鼠标移动个鼠标弹起事件，调用矩形绘制方法的回调函数。
 4. 在鼠标移动的过程中还要考虑到鼠标越界的情况。(一下代码不考虑越界情况)

绘制正方形矩形

- fillStyle 颜色
- fillRect(0, 0, 200, 200) 绘制
- context.rect()

线条

- context.lineCap = 'round' // 两端的角
- context.lineJoin = 'bevel'; // 连接的角
- context.moveTo(100, 100); 开始
- context.lineTo(200, 200); 结束
- context.lineWidth = 10 边框
- context.stroke() 绘制
- context.fill() 填充
- fillStyle 填充 跟 fill 配套使用 fillStyle 设置如果没写 fill 则不生效

绘制圆其它

- context.arc()

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document </title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>

<body>
	<canvas id="canvas"></canvas>
	<script>

		const canvas = document.getElementById('canvas');
		canvas.width = 600;
		canvas.height = 400;
		let rects = []
		const ctx = canvas.getContext('2d');
		let flag = false;
		let x, y;
		canvas.addEventListener('mousedown', (e) => {
			flag = true
			x = e.offsetX; y = e.offsetY;
		})
		canvas.addEventListener('mousemove', (event) => {
			if (flag) {
				ctx.clearRect(0, 0, canvas.width, canvas.height); // 每次绘制会清空画布
				rects.forEach(item => {
					ctx.beginPath();
					ctx.rect(item.x, item.y, item.x1, item.y1);
					ctx.stroke()
					ctx.closePath();
				})
				ctx.beginPath();
				ctx.lineWidth = "3";
				ctx.strokeStyle = "red";
				ctx.rect(x, y, event.offsetX - x, event.offsetY - y);
				ctx.stroke()
			}
		})
		canvas.addEventListener('mouseup', (e) => {
			if (!flag) return
			rects.push({x: x, y: y, x1: event.offsetX - x, y1: event.offsetY - y});
			flag = false;
			ctx.closePath();
		})
	</script>
</body>

</html>