使用Canvas绘制矩形
前言
Canvas 是一种基于矢量图形的可编程图形元素,允许Web开发者使用JavaScript语言在网页上动态创建和操作图形、图像、图表和其他视觉内容
一、使用canvas绘制一个矩形
- 首先html代码
<canvas id="canvas " width="300" height="300"></canvas>
- 然后是css代码
canvas {
/** 设置画布的边框颜色 */
border: 1px solid black;
}
- 然后编写js代码
function draw() {
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d")
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 200, 100);
}
draw();
canvas.getContext(“2d”)
该方法会返回一个 CanvasRenderingContext2D 对象
这个对象包含了一系列的属性和方法,它们允许开发者在Canvas上绘制线条、形状、文本、图像以及执行颜色填充、描边、阴影设置等各种2D图形操作。
- 完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习</title>
<style>
canvas {
/** 设置画布的边框颜色 */
border: 1px solid black; }
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 200, 100);
}
draw();
</script>
</body>
</html>
5.实现效果
二、使用鼠标绘制矩形
通过前面的内容,我们知道了证明使用canvas绘制一个矩形,那么现在我们来使用鼠标绘制一个矩形吧
html和css代码和上面的一样
完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习</title>
<style>
canvas {
/** 设置画布的边框颜色 */
border: 1px solid black;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
// 获取Canvas元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 初始化鼠标按下坐标与是否正在绘制标志
const isDrawing = false;
let startX, startY;
// 添加鼠标按下事件监听器
canvas.addEventListener('mousedown', function (event) {
isDrawing = true;
// 记录鼠标按下位置
startX = event.clientX - canvas.offsetLeft;
startY = event.clientY - canvas.offsetTop;
console.log("canvas.offsetLeft: ", canvas.offsetLeft + " canvas.offsetTop: ", canvas.offsetTop);
});
// 添加鼠标移动事件监听器
canvas.addEventListener('mousemove', function (event) {
if (isDrawing) {
// 清除上次绘制的矩形,不清除移动的时候会导致矩形叠加
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 计算鼠标当前位置与起始位置之间的宽度和高度
const endX = event.clientX - canvas.offsetLeft;
const endY = event.clientY - canvas.offsetTop;
// 绘制矩形
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
}
});
// 添加鼠标抬起事件监听器
canvas.addEventListener('mouseup', function () {
if (isDrawing) {
// 鼠标抬起时清除并重新绘制最终的矩形,不跟随鼠标移动
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(startX, startY, event.clientX - startX - canvas.offsetLeft, event.clientY - startY - canvas.offsetTop);
// 结束绘制
isDrawing = false;
}
});
// 添加鼠标离开画布事件监听器,确保鼠标离开时也会结束绘制
canvas.addEventListener('mouseleave', function () {
if (isDrawing) {
isDrawing = false;
}
});
</script>
</body>
</html>
三, 使用鼠标绘制多个矩形
完成代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用鼠标绘制多个矩形</title>
<style>
canvas {
/** 设置画布的边框颜色 */
border: 1px solid black;
margin-top: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let isDrawing = false;
let currentRect = null;
// 存储所有的矩形
const rectangles = [];
// 侦听mousedown事件开始绘制矩形
canvas.addEventListener('mousedown', function (event) {
isDrawing = true;
const rectStart = getCursorPosition(event);
currentRect = { x: rectStart.x, y: rectStart.y, startX: rectStart.x, startY: rectStart.y };
});
// 侦听mousemove事件更新当前绘制矩形的尺寸
canvas.addEventListener('mousemove', function (event) {
if (isDrawing) {
const rectEnd = getCursorPosition(event);
currentRect.width = Math.abs(rectEnd.x - currentRect.startX);
currentRect.height = Math.abs(rectEnd.y - currentRect.startY);
if (rectEnd.x < currentRect.startX) currentRect.x = rectEnd.x;
if (rectEnd.y < currentRect.startY) currentRect.y = rectEnd.y;
redraw();
}
});
// 侦听mouseup事件结束绘制并将矩形添加到数组中
canvas.addEventListener('mouseup', function (event) {
if (isDrawing) {
isDrawing = false;
rectangles.push(currentRect);
currentRect = null;
redraw();
}
});
// 获取鼠标在canvas上的坐标
function getCursorPosition(event) {
const rect = canvas.getBoundingClientRect();
return { x: event.clientX - rect.left, y: event.clientY - rect.top };
}
// 绘制单个矩形
function drawRect(x, y, width, height) {
context.strokeRect(x, y, width, height);
}
// 清除画布并重新绘制所有矩形
function redraw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (let rect of rectangles) {
drawRect(rect.x, rect.y, rect.width, rect.height);
}
if (currentRect) drawRect(currentRect.x, currentRect.y, currentRect.width, currentRect.height);
}
</script>
</body>
</html>