js实现画框
使用Canvas绘制矩形框
HTML中创建一个Canvas元素，通过JavaScript获取其上下文进行绘制。
<canvas id="myCanvas" width="400" height="300"></canvas>const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red'; // 边框颜色
ctx.lineWidth = 3; // 边框宽度
ctx.strokeRect(50, 50, 200, 150); // (x, y, width, height)使用SVG绘制矩形框
通过SVG的<rect>元素实现矢量图形绘制。
<svg width="400" height="300">
<rect x="50" y="50" width="200" height="150"
stroke="blue" stroke-width="2" fill="none"/>
</svg>使用CSS绘制方框
通过纯CSS样式创建带有边框的方框元素。
<div class="box"></div>.box {
width: 200px;
height: 150px;
border: 2px dashed green;
margin: 20px;
}动态交互画框实现
结合鼠标事件实现动态绘制方框功能。
let isDrawing = false;
let startX, startY;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
startX = e.offsetX;
startY = e.offsetY;
});
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(startX, startY, e.offsetX - startX, e.offsetY - startY);
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});圆角矩形实现
Canvas和CSS均可实现圆角矩形效果。
// Canvas圆角矩形
ctx.beginPath();
ctx.roundRect(100, 100, 200, 150, [10]);
ctx.stroke();/* CSS圆角 */
.box {
border-radius: 10px;
}
