Canvas 为我的片段打开。例如，如果我尝试选择拼图顶部的“g-b-s-I”，它将不会高亮显示，因为“g-b-s-I”不在解决方案集中。不管怎样，我并不是真的想改变你原来的代码逻辑，我只是想回答你在这里提出的关于如何用不同颜色、半透明、圆顶笔划突出单词的具体问题。我想

---

为我的片段打开。例如，如果我尝试选择拼图顶部的“g-b-s-I”，它将不会高亮显示，因为“g-b-s-I”不在解决方案集中。不管怎样，我并不是真的想改变你原来的代码逻辑，我只是想回答你在这里提出的关于如何用不同颜色、半透明、圆顶笔划突出单词的具体问题。我想我已经成功地做到了！祝你的项目好运！您好@markE先生，我如何为画布上选择的每个角色画一条线，就像上面的回答问题一样？

    function checkForWord() {

        // get the starting & ending grid-cell
        // that the user dragged across
        var startCol = parseInt(startX / colWidth);
        var startRow = parseInt(startY / rowHeight);
        var lastCol = parseInt(mouseX / colWidth);
        var lastRow = parseInt(mouseY / rowHeight);

        // get the word that the user dragged across
        // by adding the letters from the starting cell
        // to the ending cell
        var word = "";
        var length = Math.max(Math.abs(startCol - lastCol) + 1, Math.abs(startRow - lastRow) + 1);
        var dx = 0;
        var dy = 0;
        var x = startCol;
        var y = startRow;
        if (lastCol > startCol) {
            dx = 1;
        }
        if (lastCol < startCol) {
            dx = -1;
        }
        if (lastRow > startRow) {
            dy = 1;
        }
        if (lastRow < startRow) {
            dy = -1;
        }
        while (length > 0) {
            // add the letter in this grid-cell to the word
            word += letters[y * colCount + x];
            // highlight the squares that the user selected
            ctx1.save();
            ctx1.fillStyle = "#f5aded";
            ctx1.lineCap = 'round'
            ctx1.globalAlpha = 1.00;
            ctx1.globalCompositeOperation = "destination-over";
            ctx1.fillRect((x) * colWidth  , (y) * rowHeight , colWidth , rowHeight);
            ctx1.restore();
            // increment x/y/length for the next letter
            x += dx;
            y += dy;
            length--;
        }

        // reverse the word if dragged backwards
        if (dx < 0 || dy < 0) {
            word.split('').reverse().join('');
        }

        // test if the word is a solution word assuming it's spelled frontwards
        var frontwards = words.indexOf(word.toLowerCase());

        // test if the word is a solution word assuming it's spelled backwards
        var backwards = words.indexOf(stringBackwards(word).toLowerCase());

        // if the selected word matches a puzzle word
        // tell the user they found the word an remove the word from the puzzle
        // if the selected word doesn't match any remaining puzzle word
        // tell the user to try again
        if (frontwards >= 0 || backwards >= 0) {
            var index = Math.max(frontwards, backwards);
            $results.text("You just found: " + words[index]);
            words.splice(index, 1);
            if (words.length > 0) {
                var remainingWords = "Find:"
                for (var i = 0; i < words.length; i++) {
                    remainingWords += " " + words[i];
                }
                $puzzle.text(remainingWords);
            } else {
                $puzzle.text("Congratulations...");
                $results.text("You found all the words in the puzzle!");
            }

        } else {
            if (words.length > 0) {
                $results.text("Sorry...Try Again.");
            }
        }
    }

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(200, 200);
context.lineTo(400,400);
context.lineWidth = 20;
context.strokeStyle = 'rgba(0,0,250,0.5)';
context.lineCap = 'round';
context.stroke();