Question

简单地说，我正在尝试切换按钮以使线条粗体（或不粗体）。我在这里读了几个类似于这个问题的问题，但解决方案对我没有帮助。这是我的代码：

    <!DOCTYPE HTML>
    <html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>
    <body>
        <div id="DrawLineDiv">
            <canvas id="DrawLineCanvas" width="578" height="200"></canvas>
            <script>
                var canvas = document.getElementById('DrawLineCanvas');
                var context = canvas.getContext('2d');

                // Use beginPath() to declare that a new path is to be drawn
                context.beginPath();

                // Place the drawing cursor at the desired point
                context.moveTo(100, 150);

                // Determine where to stop drawing
                context.lineTo(450,50);

                //Draw the line
                context.stroke();
            </script>
        </div>
        <script>
            var canvas = document.getElementById("DrawLineCanvas");
            //var context = canvas.getContext('2d');

            function toggleLineBold(button) {
            var button;

            if (button == "BoldNow") {
                context.lineWidth = 15;
                context.stroke();

                document.getElementById("BoldLineButton").onclick = function(){
                    toggleLineBold('Regular');
                    };

                } else {
                context.lineWidth = 1;
                context.stroke();

                document.getElementById("BoldLineButton").onclick = function(){
                    toggleLineBold('BoldNow');
                    };
                return;
                };
            };
        </script>
        <div id="BoldLineButton" style="height:50px; width:120px; border:2px solid #6495ed; background-color:#bcd2ee; border-radius:10px; margin-left: 5px; text-align:center" onclick="toggleLineBold('BoldNow')">
        <br/>Toggle Bold Line<br/>
        </div>
    </body>
</html>

该行更改为粗体，但在尝试更改onclick事件的行中的javascript中触发错误。我知道我有些不对劲，我只是不确定是什么。

提前感谢您的帮助。

Answer 1

<强> LIVE DEMO

HTML：

<canvas id="DrawLineCanvas" width="578" height="200"></canvas>
<button id="BoldLineButton">Line size: <b>1</b></button>

JS：

var doc = document,
    canvas  = doc.querySelector('#DrawLineCanvas'),
    boldBtn = doc.querySelector('#BoldLineButton'),
    ctx = canvas.getContext('2d'),
    size =  [1, 3, 5, 10, 15],      // use only [1, 15] if you want
    currSize = 0; // size[0] = 1    // Index pointer to get the value out of the 
                                    // size Array


function draw(){
   canvas.width = canvas.width;
   ctx.beginPath();
   ctx.moveTo(100, 150);
   ctx.lineTo(450,50);
   ctx.lineWidth = size[currSize];  // Use currSize Array index
   ctx.stroke();
}
draw(); 

function toggleLineBold() {
   ++currSize;                      // Increase size and
   currSize %= size.length;         // loop if needed.
   boldBtn.getElementsByTagName('b')[0].innerHTML =  size[currSize];
   draw();   
}

boldBtn.addEventListener("click", toggleLineBold);

在Javascript中切换Onclick问题

1 个答案: