安定网站建设,关于计算机网站开发的论文题目,培训学校管理系统,国家建筑信息管理平台说明 项目中可能需要用户根据展示的图片#xff0c;然后绘制需要裁剪的路径#xff0c;再根据绘制的坐标进行裁剪#xff0c;以下是前端的裁剪路径绘制的代码示例#xff0c;后端可以根据当前的获取到的坐标进行裁剪#xff0c;裁剪的坐标保存在coordinate数组中。
代码 …说明 项目中可能需要用户根据展示的图片然后绘制需要裁剪的路径再根据绘制的坐标进行裁剪以下是前端的裁剪路径绘制的代码示例后端可以根据当前的获取到的坐标进行裁剪裁剪的坐标保存在coordinate数组中。
代码
!DOCTYPE html
html
body
canvas idmyCanvas styleborder:1px solid #d3d3d3;
Your browser does not support the HTML5 canvas tag.
/canvas
script
var canvas document.getElementById(myCanvas);
var ctx canvas.getContext(2d);
var img new Image();img.onload function() {canvas.width img.width;canvas.height img.height;ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src https://img0.baidu.com/it/u2604378473,1820239902fm253fmtautoapp120fJPEG?w627h418;var x 0;
var y 0;
var coordinate []
canvas.onmousemove function(e) {handleClearCanvas();handleMouseMove(e);handleClickShape();
}// 点击获取坐标
canvas.onclick function(e) {coordinate.push({x: x,y: y})
}canvas.ondblclick function(e) {handleClearCanvas();coordinate [];
}// 清理画布
function handleClearCanvas() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(img, 0, 0, img.width, img.height);
}// 移动光标时的线
function handleMouseMove(e) {x e.clientX - canvas.offsetLeft;y e.clientY - canvas.offsetTop;ctx.beginPath()ctx.moveTo(x, 0);ctx.lineTo(x, img.height);ctx.moveTo(0, y);ctx.lineTo(img.width, y);ctx.stroke();// 显示光标位置信息ctx.font 15px Arial;ctx.fillStyle red; // 在canvas外显示光标位置ctx.fillText(( x , y ), 5, 30);
}// 选择的线
function handleClickShape() {if (coordinate.length 0){return}if (coordinate.length 1) {const item coordinate[0]ctx.fillText(☆, item.x, item.y); return}for (let index 1 ; index coordinate.length; index){const prev coordinate[index - 1]const next coordinate[index]ctx.beginPath();ctx.moveTo(prev.x, prev.y);ctx.lineTo(next.x, next.y);ctx.stroke();}
}
/script/body
/html
结果
