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>