簡(jiǎn)介這份資源面向前端初學(xué)者與互動(dòng)教學(xué)應(yīng)用開(kāi)發(fā)者提供一套基于HTML5 Canvas與JavaScript的連線題完整實(shí)現(xiàn)方案可用于在線測(cè)驗(yàn)、教育游戲或認(rèn)知測(cè)試場(chǎng)景。壓縮包共4個(gè)文件包含1個(gè)html頁(yè)面、1個(gè)js邏輯腳本和2個(gè)css樣式文件整體僅9KB結(jié)構(gòu)輕量便于快速集成與二次修改。核心內(nèi)容圍繞Canvas繪圖、jQuery事件處理、連線判定算法、縱向與橫向兩種題型模板、取值回調(diào)及交互反饋展開(kāi)并涉及坐標(biāo)計(jì)算與性能優(yōu)化思路。已有640人學(xué)習(xí)適合想通過(guò)小案例掌握Canvas交互開(kāi)發(fā)、事件綁定與答題邏輯設(shè)計(jì)的讀者參考可從中獲取可運(yùn)行的連線題原型、模板切換思路與回調(diào)驗(yàn)證機(jī)制作為課程作業(yè)或項(xiàng)目練手的起點(diǎn)。1. 從一道“連不上”的題說(shuō)起這個(gè) H5 連線題項(xiàng)目到底能干什么前陣子幫一個(gè)做在線教育的朋友看他們新上的互動(dòng)題學(xué)生端反饋“拖拽沒(méi)反應(yīng)、線畫不出來(lái)、對(duì)錯(cuò)判斷全靠猜”。翻完代碼發(fā)現(xiàn)問(wèn)題不在業(yè)務(wù)邏輯而在 canvas 的坐標(biāo)系和事件綁定上——這也是很多 H5 連線題項(xiàng)目的通病。今天要拆的這個(gè)項(xiàng)目就是一套用 H5 canvas js 實(shí)現(xiàn)的連線題方案核心解決三件事把左右兩列選項(xiàng)畫到畫布上、讓手指或鼠標(biāo)能拖出一條跟隨的線、松手時(shí)判斷連到了哪個(gè)目標(biāo)并給出對(duì)錯(cuò)反饋。它適合誰(shuí)正在做題庫(kù)、互動(dòng)課件、輕量級(jí)答題頁(yè)的開(kāi)發(fā)者尤其是想用 jquery 快速搭原型、又不想引入重型圖形庫(kù)的場(chǎng)景。整套代碼不依賴框架瀏覽器打開(kāi)就能跑改起來(lái)也直接。2. 技術(shù)選型與整體架構(gòu)為什么是 canvas 而不是 DOM 連線2.1 選型對(duì)比DOM SVG 與 canvas 的取舍做連線題第一反應(yīng)可能是用 DOM 元素加 SVG 畫線畢竟元素好定位、事件好綁定。但這個(gè)項(xiàng)目選了 canvas原因很實(shí)際連線題的核心交互是“拖拽過(guò)程中實(shí)時(shí)重繪一條跟隨線”如果每次 mousemove 都去操作 SVG path 的 d 屬性在低端安卓機(jī)上會(huì)明顯掉幀。canvas 是一整塊畫布清屏加重繪的成本可控而且連線題的視覺(jué)元素簡(jiǎn)單——就是圓點(diǎn)、文字、線段不需要 DOM 的可訪問(wèn)性和樣式繼承。常見(jiàn)做法是選項(xiàng)文字用 canvas 的 fillText 繪制錨點(diǎn)用 arc 畫圓連線用 moveTo/lineTo 描邊。這樣整個(gè)題目就是一張畫布事件只綁在 canvas 上通過(guò)坐標(biāo)反查命中了哪個(gè)錨點(diǎn)。代價(jià)是文字換行、樣式微調(diào)得自己算但對(duì)連線題這種固定布局來(lái)說(shuō)反而更可控。2.2 項(xiàng)目目錄結(jié)構(gòu)與模塊劃分這個(gè)項(xiàng)目沒(méi)有構(gòu)建工具就是一個(gè)靜態(tài)頁(yè)面加幾個(gè) js 文件結(jié)構(gòu)很扁平lianxian/ ├── index.html # 頁(yè)面入口放 canvas 容器 ├── css/ │ └── style.css # 畫布尺寸、頁(yè)面基礎(chǔ)樣式 ├── js/ │ ├── jquery.min.js # 事件綁定與 DOM 操作 │ ├── question.js # 題目數(shù)據(jù)與配置 │ ├── canvas.js # 畫布初始化、繪制錨點(diǎn)與文字 │ ├── line.js # 連線繪制與拖拽邏輯 │ └── judge.js # 連線結(jié)果判定與反饋 └── images/ # 對(duì)錯(cuò)圖標(biāo)等靜態(tài)資源question.js 里存題目數(shù)據(jù)canvas.js 負(fù)責(zé)把數(shù)據(jù)畫出來(lái)line.js 處理交互judge.js 做判定。模塊之間通過(guò)全局的題目對(duì)象和畫布上下文通信沒(méi)有用模塊化打包好處是新手直接改文件就能看到效果壞處是變量都掛在 window 上改的時(shí)候要注意命名別沖突。2.3 數(shù)據(jù)驅(qū)動(dòng)題目配置長(zhǎng)什么樣題目數(shù)據(jù)決定了畫布上畫什么、連什么算對(duì)。一個(gè)典型的配置如下// question.js var questionData { left: [ { id: l1, text: 蘋果, x: 80, y: 120 }, { id: l2, text: 香蕉, x: 80, y: 200 }, { id: l3, text: 橘子, x: 80, y: 280 } ], right: [ { id: r1, text: 紅色, x: 420, y: 120 }, { id: r2, text: 黃色, x: 420, y: 200 }, { id: r3, text: 橙色, x: 420, y: 280 } ], // 正確答案映射左 id 對(duì)應(yīng)右 id answer: { l1: r1, l2: r2, l3: r3 } };x、y 是錨點(diǎn)在畫布上的坐標(biāo)單位是像素。answer 對(duì)象存正確配對(duì)判定時(shí)拿用戶連的右 id 和這里比對(duì)。改題目只需要改這個(gè)文件不用動(dòng)畫布邏輯。注意坐標(biāo)要跟 canvas 的實(shí)際寬高匹配如果 css 里把 canvas 縮放顯示坐標(biāo)換算會(huì)出問(wèn)題后面避坑章節(jié)會(huì)細(xì)說(shuō)。3. 核心繪制鏈路從清屏到錨點(diǎn)、文字、連線的完整實(shí)現(xiàn)3.1 畫布初始化與高清屏適配canvas 在移動(dòng)端有個(gè)經(jīng)典坑css 尺寸和畫布實(shí)際像素不一致導(dǎo)致線條模糊。項(xiàng)目里做了 devicePixelRatio 適配// canvas.js function initCanvas() { var canvas document.getElementById(questionCanvas); var ctx canvas.getContext(2d); var dpr window.devicePixelRatio || 1; var cssWidth 500; var cssHeight 400; // 實(shí)際像素放大 dpr 倍 canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; canvas.style.width cssWidth px; canvas.style.height cssHeight px; // 縮放上下文讓后續(xù)繪制按 css 像素走 ctx.scale(dpr, dpr); return { canvas: canvas, ctx: ctx, width: cssWidth, height: cssHeight }; }dpr 是設(shè)備像素比普通屏是 1高清屏可能是 2 或 3。canvas.width 設(shè)成 css 寬乘 dpr再用 ctx.scale 把繪制坐標(biāo)系縮回 css 像素這樣后面所有坐標(biāo)都按 500x400 來(lái)寫不用到處乘 dpr。如果跳過(guò)這步在高清屏上文字和線條會(huì)發(fā)虛這是血淚經(jīng)驗(yàn)。3.2 繪制錨點(diǎn)與文字fillText 與 arc 的配合錨點(diǎn)是連線的起點(diǎn)和終點(diǎn)視覺(jué)上是個(gè)小圓點(diǎn)旁邊帶文字。繪制函數(shù)遍歷題目數(shù)據(jù)// canvas.js function drawAnchors(ctx, data) { ctx.clearRect(0, 0, 500, 400); // 清屏 ctx.font 16px sans-serif; ctx.textAlign center; ctx.textBaseline middle; // 畫左側(cè) data.left.forEach(function (item) { ctx.beginPath(); ctx.arc(item.x, item.y, 8, 0, Math.PI * 2); ctx.fillStyle #4a90d9; ctx.fill(); ctx.fillStyle #333; ctx.fillText(item.text, item.x - 40, item.y); }); // 畫右側(cè) data.right.forEach(function (item) { ctx.beginPath(); ctx.arc(item.x, item.y, 8, 0, Math.PI * 2); ctx.fillStyle #d9534f; ctx.fill(); ctx.fillStyle #333; ctx.fillText(item.text, item.x 40, item.y); }); }clearRect 每次重繪前清空整塊畫布這是 canvas 動(dòng)畫的基本節(jié)奏。arc 的第三個(gè)參數(shù)是半徑這里錨點(diǎn)半徑 8 像素命中判定時(shí)也用這個(gè)值加一點(diǎn)容差。文字用 fillText 畫在錨點(diǎn)旁邊左側(cè)文字往左偏 40 像素右側(cè)往右偏避免壓住圓點(diǎn)。textAlign 和 textBaseline 設(shè)成 center/middle讓文字以給定坐標(biāo)為中心省去手動(dòng)算寬高。3.3 拖拽連線mousedown 到 mousemove 的狀態(tài)機(jī)連線的交互本質(zhì)是個(gè)小狀態(tài)機(jī)按下時(shí)判斷有沒(méi)有命中錨點(diǎn)移動(dòng)時(shí)更新臨時(shí)線終點(diǎn)松開(kāi)時(shí)做判定。用 jquery 綁事件// line.js var dragging false; var startAnchor null; var currentPos { x: 0, y: 0 }; $(canvas).on(mousedown touchstart, function (e) { var pos getEventPos(e); var anchor hitTest(pos, questionData.left); // 只允許從左往右連 if (anchor) { dragging true; startAnchor anchor; currentPos pos; } }); $(canvas).on(mousemove touchmove, function (e) { if (!dragging) return; currentPos getEventPos(e); redraw(); // 重繪所有錨點(diǎn) 當(dāng)前拖拽線 }); $(canvas).on(mouseup touchend, function (e) { if (!dragging) return; var pos getEventPos(e); var endAnchor hitTest(pos, questionData.right); if (endAnchor) { saveConnection(startAnchor.id, endAnchor.id); } dragging false; startAnchor null; redraw(); });getEventPos 負(fù)責(zé)把鼠標(biāo)或觸摸事件的坐標(biāo)換算成畫布坐標(biāo)觸摸事件要取 touches[0]。hitTest 遍歷錨點(diǎn)數(shù)組算事件坐標(biāo)到錨點(diǎn)圓心的距離小于半徑加容差就算命中。mousedown 只檢測(cè)左側(cè)錨點(diǎn)保證連線方向是從左到右避免用戶從右往左連造成判定混亂。mousemove 里調(diào) redraw把已保存的連線和當(dāng)前拖拽的臨時(shí)線一起畫出來(lái)。3.4 坐標(biāo)換算getBoundingClientRect 的正確用法事件坐標(biāo)和畫布坐標(biāo)不是一回事頁(yè)面滾動(dòng)、canvas 在頁(yè)面中的位置都會(huì)影響// line.js function getEventPos(e) { var rect canvas.getBoundingClientRect(); var clientX, clientY; if (e.type.indexOf(touch) 0) { clientX e.originalEvent.touches[0].clientX; clientY e.originalEvent.touches[0].clientY; } else { clientX e.clientX; clientY e.clientY; } return { x: clientX - rect.left, y: clientY - rect.top }; }getBoundingClientRect 返回 canvas 相對(duì)視口的位置clientX 減去 rect.left 就是畫布內(nèi)坐標(biāo)。注意這里沒(méi)有乘 dpr因?yàn)榍懊?ctx.scale 已經(jīng)把繪制坐標(biāo)系縮回 css 像素事件坐標(biāo)也是 css 像素兩邊一致。如果頁(yè)面有縮放或 canvas 被 css transform 過(guò)這套換算會(huì)偏得用更復(fù)雜的矩陣變換但常規(guī)布局夠用。4. 判定與反饋連線結(jié)果怎么算對(duì)、怎么給用戶后悔藥4.1 連線存儲(chǔ)與重繪已連的線不能丟用戶可能連多條線每條都要記住并在重繪時(shí)畫出來(lái)// line.js var connections []; // { from: l1, to: r1 } function saveConnection(fromId, toId) { // 同一個(gè)左錨點(diǎn)只保留最后一條線 connections connections.filter(function (c) { return c.from ! fromId; }); connections.push({ from: fromId, to: toId }); } function drawConnections(ctx) { connections.forEach(function (c) { var from findAnchor(c.from, questionData.left); var to findAnchor(c.to, questionData.right); ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.lineTo(to.x, to.y); ctx.strokeStyle #4a90d9; ctx.lineWidth 2; ctx.stroke(); }); }saveConnection 里先過(guò)濾掉同一個(gè)左錨點(diǎn)的舊連線保證一個(gè)左項(xiàng)只連一個(gè)右項(xiàng)這是連線題的基本規(guī)則。drawConnections 根據(jù) id 找到錨點(diǎn)坐標(biāo)moveTo 到起點(diǎn)、lineTo 到終點(diǎn)、stroke 描邊。重繪順序是先畫連線再畫錨點(diǎn)這樣錨點(diǎn)圓點(diǎn)蓋在線段端點(diǎn)上視覺(jué)更干凈。4.2 判定邏輯遍歷 answer 映射逐條比對(duì)判定就是拿用戶連的結(jié)果和正確答案比// judge.js function judgeAnswer() { var correct 0; var total Object.keys(questionData.answer).length; connections.forEach(function (c) { if (questionData.answer[c.from] c.to) { correct; } }); var allRight correct total connections.length total; showResult(allRight, correct, total); return allRight; }total 是正確答案的條目數(shù)correct 是連對(duì)的條數(shù)。allRight 要求連對(duì)數(shù)量等于總數(shù)且連線數(shù)量也等于總數(shù)防止用戶少連幾條卻因?yàn)闆](méi)連錯(cuò)而誤判為全對(duì)。showResult 負(fù)責(zé)在頁(yè)面上顯示對(duì)錯(cuò)提示可以彈層也可以改文字。4.3 對(duì)錯(cuò)反饋與重置給用戶一次重來(lái)的機(jī)會(huì)判定完要給出視覺(jué)反饋并且允許重置// judge.js function showResult(allRight, correct, total) { var tip document.getElementById(resultTip); if (allRight) { tip.textContent 全部連對(duì)共 total 題; tip.style.color #5cb85c; } else { tip.textContent 連對(duì) correct / total 再試試; tip.style.color #d9534f; } } // 重置按鈕 $(#resetBtn).on(click, function () { connections []; document.getElementById(resultTip).textContent ; redraw(); });反饋文案直接告訴用戶連對(duì)幾條比單純說(shuō)“錯(cuò)誤”更有指導(dǎo)性。重置就是把 connections 清空、提示清空、重繪畫布。這里用 jquery 綁按鈕事件跟 canvas 事件分開(kāi)邏輯清晰。注意 connections 是全局變量重置時(shí)直接賦空數(shù)組別用 length0 之外的花招簡(jiǎn)單直接。5. 避坑與排查連線題最容易翻車的五個(gè)地方5.1 現(xiàn)象移動(dòng)端拖拽時(shí)頁(yè)面跟著滾動(dòng)原因touchmove 默認(rèn)會(huì)觸發(fā)頁(yè)面滾動(dòng)canvas 上的拖拽被頁(yè)面滾動(dòng)搶走。解決在 touchmove 事件里調(diào) e.preventDefault()并且給 canvas 加 css 的 touch-action: none。注意 preventDefault 要放在判斷 dragging 之后否則會(huì)阻止正常滾動(dòng)。5.2 現(xiàn)象高清屏上線條和文字發(fā)虛原因只設(shè)了 canvas 的 css 尺寸沒(méi)設(shè)實(shí)際像素尺寸瀏覽器把低分辨率畫布拉伸顯示。解決按 devicePixelRatio 放大 canvas.width/height再用 ctx.scale 縮回邏輯坐標(biāo)參考 3.1 的 initCanvas。5.3 現(xiàn)象點(diǎn)擊錨點(diǎn)沒(méi)反應(yīng)或者命中位置偏移原因事件坐標(biāo)沒(méi)減去 canvas 的 getBoundingClientRect().left/top或者頁(yè)面滾動(dòng)后 rect 變了沒(méi)重新取。解決每次事件里實(shí)時(shí)調(diào) getBoundingClientRect別緩存觸摸事件記得取 touches[0] 而不是 e 本身。5.4 現(xiàn)象連完一條線再連同一起點(diǎn)舊線還在原因saveConnection 沒(méi)做去重connections 里堆了多條同 from 的記錄。解決push 之前先 filter 掉 from 相同的舊記錄保證一個(gè)左錨點(diǎn)只有一條線。5.5 現(xiàn)象判定全對(duì)但用戶其實(shí)少連了原因判定只統(tǒng)計(jì)連對(duì)的條數(shù)沒(méi)校驗(yàn)連線總數(shù)。解決allRight 條件里加上 connections.length total兩個(gè)條件都滿足才算全對(duì)。6. 二次開(kāi)發(fā)改造從固定題目到動(dòng)態(tài)題庫(kù)的落地思路這套代碼跑通之后最自然的改造方向是把它接進(jìn)真實(shí)題庫(kù)?，F(xiàn)在的題目數(shù)據(jù)寫死在 question.js 里實(shí)際項(xiàng)目里題目通常來(lái)自接口。我的做法是保留繪制和交互邏輯不動(dòng)只把 questionData 的賦值改成異步獲取// 改造從接口拉題目 function loadQuestion(qid) { $.get(/api/question/ qid, function (res) { questionData res.data; // 結(jié)構(gòu)保持 left/right/answer connections []; redraw(); }); }接口返回的數(shù)據(jù)結(jié)構(gòu)跟原來(lái)保持一致這樣 canvas.js、line.js、judge.js 一行都不用改。這是數(shù)據(jù)驅(qū)動(dòng)的價(jià)值——只要契約不變渲染層就是穩(wěn)定的。如果接口字段名不同加一層適配函數(shù)轉(zhuǎn)換即可別去改繪制代碼。第二個(gè)改造點(diǎn)是錨點(diǎn)坐標(biāo)。現(xiàn)在 x、y 是寫死的題目一多、選項(xiàng)一長(zhǎng)就會(huì)重疊。常見(jiàn)做法是根據(jù)選項(xiàng)數(shù)量動(dòng)態(tài)算坐標(biāo)左側(cè) x 固定y 按 index 均分畫布高度右側(cè)同理。文字太長(zhǎng)的話fillText 之前先用 measureText 量寬度超過(guò)閾值就截?cái)嗉邮÷蕴?hào)或者換行繪制。這些都屬于渲染層的增強(qiáng)不影響判定邏輯。第三個(gè)改造點(diǎn)是判定反饋的豐富度?，F(xiàn)在只有文字提示可以加對(duì)錯(cuò)圖標(biāo)、把連錯(cuò)的線標(biāo)紅、連對(duì)的線標(biāo)綠。實(shí)現(xiàn)方式是在 drawConnections 里根據(jù) judge 結(jié)果給每條線不同的 strokeStyle。注意判定和繪制要解耦先算出每條線的對(duì)錯(cuò)狀態(tài)存起來(lái)再統(tǒng)一重繪別在繪制函數(shù)里現(xiàn)算否則重繪頻繁時(shí)性能會(huì)抖。最后一個(gè)容易忽略的點(diǎn)是移動(dòng)端手勢(shì)沖突。如果頁(yè)面本身可以上下滾動(dòng)canvas 又占了大半屏用戶想滾動(dòng)頁(yè)面卻觸發(fā)了連線。我的習(xí)慣是給 canvas 加一個(gè)“編輯模式”開(kāi)關(guān)非編輯模式下不綁拖拽事件用戶點(diǎn)一下“開(kāi)始連線”才激活。這樣滾動(dòng)和連線互不干擾體驗(yàn)上更接近真實(shí)答題場(chǎng)景。從那以后我每次做 canvas 交互都強(qiáng)制先跑一遍坐標(biāo)換算和 dpr 適配再寫業(yè)務(wù)邏輯——這兩步翻車后面全白搭。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取