溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么使用js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么使用js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形”文章能幫助大家解決問(wèn)題。
效果圖：
完整代碼：（記得引入jQuery）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas繪制多邊形</title>
<script src="jQuery.js"></script>
</head>
<body>
<style>
canvas {
border: 1px solid #333;
display: block;
}
input {
width: 100px;
margin-left: 200px;
margin-top: 650px;
}
#canvas{
position: absolute;
left: 0;
top: 0;
z-index: 1;
cursor: crosshair;
}
#canvasSave{
position: absolute;
left: 0;
top: 0;
}
</style>
<!--用來(lái)和鼠標(biāo)進(jìn)行交互操作的canvas-->
<canvas id="canvas" width="1000px" height="600px"></canvas>
<!--存儲(chǔ)已生成的點(diǎn)線，避免被清空-->
<canvas id="canvasSave" width="1000px" height="600px"></canvas>
<input id="deleteCanvas" type="button" value="清空選區(qū)">
<script>
var can = document.getElementById("canvas");
var ctx = can.getContext('2d');
var canSave = document.getElementById("canvasSave");
var ctxSave = canSave.getContext('2d');
var pointX, pointY;
var pointArr = [];//存放坐標(biāo)的數(shù)組
ctx.strokeStyle = 'rgba(102,168,255,1)';//線條顏色
ctx.lineWidth = 4;//線條粗細(xì)
ctxSave.strokeStyle = 'rgba(102,168,255,1)';//線條顏色
ctxSave.lineWidth = 4;//線條粗細(xì)
var oIndex = -1;//判斷鼠標(biāo)是否移動(dòng)到起始點(diǎn)處，-1為否，1為是
/*點(diǎn)擊畫(huà)點(diǎn)*/
$(can).click(function (e) {
if (e.offsetX || e.layerX) {
pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
var piX,piY;
if(oIndex > 0 && pointArr.length > 0){
piX = pointArr[0].x;
piY = pointArr[0].y;
//畫(huà)點(diǎn)
makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');
pointArr.push({x: piX, y: piY});
canvasSave(pointArr);//保存點(diǎn)線同步到另一個(gè)canvas
saveCanvas();//生成畫(huà)布
}else {
piX = pointX;
piY = pointY;
makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');
pointArr.push({x: piX, y: piY});
canvasSave(pointArr);//保存點(diǎn)線同步到另一個(gè)canvas
}
}
});
/* */
$(can).mousemove(function (e) {
if (e.offsetX || e.layerX) {
pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
var piX,piY;
/*清空畫(huà)布*/
ctx.clearRect(0, 0, can.width, can.height);
/*鼠標(biāo)下跟隨的圓點(diǎn)*/
makearc(ctx, pointX, pointY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');
if (pointArr.length > 0) {
if((pointX > pointArr[0].x-15 && pointX < pointArr[0].x+15) && (pointY > pointArr[0].y-15 && pointY < pointArr[0].y+15)){
if(pointArr.length>1){
piX = pointArr[0].x;
piY = pointArr[0].y;
ctx.clearRect(0, 0, can.width, can.height);
makearc(ctx, piX, piY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');
oIndex = 1;
}
}else {
piX = pointX;
piY = pointY;
oIndex = -1;
}
/*開(kāi)始繪制*/
ctx.beginPath();
ctx.moveTo (pointArr[0].x, pointArr[0].y);
if (pointArr.length > 1){
for (var i = 1; i < pointArr.length; i++){
ctx.lineTo(pointArr[i].x, pointArr[i].y);
}
}
ctx.lineTo(piX, piY);
ctx.fillStyle = 'rgba(161,195,255,1)';//填充顏色
ctx.fill();//填充
ctx.stroke();//繪制
}
}
});
// 存儲(chǔ)已生成的點(diǎn)線
function canvasSave(pointArr){
ctxSave.clearRect(0, 0, ctxSave.width, ctxSave.height);
ctxSave.beginPath();
if (pointArr.length > 1){
ctxSave.moveTo (pointArr[0].x, pointArr[0].y);
for (var i = 1; i < pointArr.length; i++){
ctxSave.lineTo(pointArr[i].x, pointArr[i].y);
ctxSave.fillStyle = 'rgba(161,195,255,1)';//填充顏色
//ctxSave.fill();
ctxSave.stroke();//繪制
}
ctxSave.closePath();
}
}
/*生成畫(huà)布 結(jié)束繪畫(huà)*/
function saveCanvas() {
ctx.clearRect(0, 0, can.width, can.height);
ctxSave.closePath();//結(jié)束路徑狀態(tài)，結(jié)束當(dāng)前路徑，如果是一個(gè)未封閉的圖形，會(huì)自動(dòng)將首尾相連封閉起來(lái)
ctxSave.fill();//填充
ctxSave.stroke();//繪制
pointArr = [];
}
/*清空選區(qū)*/
$('#deleteCanvas').click(function () {
ctx.clearRect(0, 0, can.width, can.height);
ctxSave.clearRect(0, 0, canSave.width, canSave.height);
pointArr = [];
});
/*驗(yàn)證canvas畫(huà)布是否為空函數(shù)*/
function isCanvasBlank(canvas) {
var blank = document.createElement('canvas');//創(chuàng)建一個(gè)空canvas對(duì)象
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() == blank.toDataURL();//為空 返回true
}
/*canvas生成圓點(diǎn)*/
function GetRandomNum(Min, Max) {
var Range = Max - Min;
var Rand = Math.random();
return (Min + Math.round(Rand * Range));
}
function makearc(ctx, x, y, r, s, e, color) {
ctx.clearRect(0, 0, 199, 202);//清空畫(huà)布
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x, y, r, s, e);
ctx.fill();
}
</script>
</body>
</html>關(guān)于“怎么使用js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼