使用原生JavaScript和Canvas绘制可交互矩形
本文介绍如何利用原生JavaScript和Canvas元素绘制一个可拖动和调整大小的矩形。
一、绘制矩形：
首先，我们需要使用JavaScript获取Canvas元素和其2D渲染上下文：
const canvas = document.getElementById('my-canvas');const ctx = canvas.getContext('2d');ctx.fillStyle = 'blue'; // 设置填充颜色ctx.fillRect(10, 10, 100, 50); // 绘制矩形 (x, y, width, height)这段代码绘制了一个蓝色矩形，其左上角坐标为(10, 10)，宽为100像素，高为50像素。
二、拖动矩形：
实现拖动功能需要监听鼠标事件：mousedown、mousemove和mouseup。
Weights.gg
多功能的AI在线创作与交流平台
3352 查看详情
let isDragging = false;let startX, startY;canvas.addEventListener('mousedown', (e) => { // 检查鼠标是否在矩形内 if (isPointInRect(e.offsetX, e.offsetY, 10, 10, 100, 50)) { isDragging = true; startX = e.offsetX; startY = e.offsetY; }});canvas.addEventListener('mousemove', (e) => { if (isDragging) { const dx = e.offsetX - startX; const dy = e.offsetY - startY; // 清除画布并重新绘制矩形 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(10 + dx, 10 + dy, 100, 50); startX = e.offsetX; startY = e.offsetY; }});canvas.addEventListener('mouseup', () => { isDragging = false;});//辅助函数，判断点是否在矩形内function isPointInRect(x, y, rectX, rectY, rectWidth, rectHeight) { return x >= rectX && x = rectY && y <= rectY + rectHeight;}这段代码添加了鼠标事件监听器。mousedown事件检测鼠标是否点击在矩形内，如果是则开始拖动；mousemove事件计算矩形位移并重新绘制；mouseup事件结束拖动。
三、调整矩形大小：
为了调整矩形大小，我们可以监听dblclick事件，并根据点击位置调整矩形的宽高。 这部分实现较为复杂，需要判断点击位置是哪个边或角，然后进行相应的调整。为了简化，这里省略了这部分代码，但可以参考文中提到的Fabric.js库来实现更高级的功能。
四、总结：
以上代码展示了使用原生JavaScript和Canvas绘制可拖动矩形的核心步骤。 对于更复杂的交互和功能，例如调整大小、旋转等，建议使用Fabric.js等Canvas库，它们提供了更便捷的API和更丰富的功能。
以上就是原生JS Canvas如何绘制并拖动可调整大小的矩形？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1146898.html
微信扫一扫 
支付宝扫一扫 
