Question

我已经在这个网站和其他许多网站上搜索了这个问题的答案，但根据每个网站（包括这个和w3schools），以下内容应该可以在HTML5中使用画布绘制一条线。

var c=document.getElementById("drawBox");

var ctx=c.getContext("2d");

ctx.strokeStyle=document.getElementById("lineColor").value;

ctx.fillStyle=document.getElementById("fillColor").value;

ctx.lineWidth=document.getElementById("lineWidth").value;

ctx.beginPath();

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.stroke();

请注意，以上行是我的代码中的代码段，而不是完整的代码本身，如下所示。

我正在尝试为我的作业编写一个简单的绘图程序，但出于某种原因（我已经测试了不同的方法），它根本就不会画线。它没有抛出任何错误，它只是不会划清界限。我正在使用谷歌浏览器（根据我的理解，您可以完全信任使用html5的唯一浏览器）。我已经测试了下面的代码，以确保逻辑分支实际上正在执行。事实上，一切都完美地执行，直到实际的ctx.stroke（）;功能。同样，它没有错误，但它根本不会画线。 mouseup和mouseout函数也正常工作，因为我用其他我知道可以工作的代码测试它。以下是我正在使用的代码：

这里是修订后的代码（但仍然没有画出来，因为所有的帮助都很晚了）

    $(document).ready(function (){
///////////////////////////////////////////

    var c=document.getElementById("drawBox");
    var ctx=c.getContext("2d");
    var x=0;
    var y=0;
    var position="";
    var rangeValue=1;
    var x1=0;
    var y1=0;
    var startDraw=false;
    var x2=0;
    var y2=0;


   $('#drawBox').mousemove(function (){
        x=window.event.clientX;
        y=window.event.clientY;

        position=x + ", " + y;

        document.getElementById("check").innerHTML=position;
    });

   $("#lineWidth").mousemove(function (){
   rangeValue = document.getElementById("lineWidth").value;
   $("#rangeValueContainer").html(rangeValue);
  });

  $("#drawBox").mouseout(function (){
     startDraw=false;
  });

   $("#drawBox").mousedown(function (){
        startDraw=true;
        x1=window.event.clientX;
        y1=window.event.clientY;
        ctx.strokeStyle=document.getElementById("lineColor").value;
        ctx.fillStyle=document.getElementById("fillColor").value;
        ctx.lineWidth=document.getElementById("lineWidth").value;
        ctx.moveTo(x1, y1);
        });
        ///
    $("#drawBox").mouseup(function (){
           if (startDraw)
           {
                x2=window.event.clientX;
                y2=window.event.clientY;
                //$("p").html(document.getElementById("fillColor").value);
                ctx.lineTo(x2, y2);
                ctx.stroke();
                startDraw = false;
           }
    });

            ///

        /*if (document.getElementById("shapeSelect").value == "line")
        {
            $("#drawBox").mouseup(function (){
                x2=window.event.clientX;
                y2=window.event.clientY;
                //$("p").html(document.getElementById("lineColor").value);
                ctx.lineTo(x2, y2);
                ctx.stroke();
            });
        }

        if (document.getElementById("shapeSelect").value == "square")
        {
            $("p").html(document.getElementById("fillColor").value);
        }

        if (document.getElementById("shapeSelect").value == "circle")
        {

        }
    }); */

    $("#eraseBtn").click(function (){
        ctx.save();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        ctx.restore();
    });
});

此外，有些网站说使用beginPath()其他人说要使用beginPath()和closePath()，而其他网站（即w3schools）也没有说使用它们？他们有必要吗？他们的观点是什么？在某些情况下，我是否需要它们？我必须让这个程序最终绘制正方形和圆形。

非常感谢任何帮助。

很抱歉，如果这篇文章有点草率，我试过，但这是我的第一篇文章，我不认为这个网站的部分认识到某些东西是代码，正在拾起jquery。我不得不手动输入大量的换行符，只是为了让它看起来和XD一样糟糕

另外，重要的是要提到我（在测试之前总是这样做）清除缓存，甚至总是使用ctrl + f5来忽略加载时的缓存。

由于

好的这是HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Canvas Drawer</title>
    <base href="index.htm"/>
    <link rel="shrotcut icon" href="/paintbrush.ico" type="image/x-icon" />
    <link href="_Styling.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.1.7.2.js"></script>
    <script type="text/javascript" src="_Operation.js"></script>
  </head>
  <body>
    <table id="tableContainer">
        <tr>
            <td colspan="2">
                </br>
                <span id="programTitle">
                  Painter 0.0
                </span></br>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <canvas id="drawBox">Your browser does not support the HTML5 canvas tag.</canvas>
            </td>
        </tr>
        <tr>
            <td style="text-align: left;">
                <span>
                    Cursor Position:
                </span>
            </td>
            <td style="text-align: right;">
                <span id="checkPosition">
                  <span id="check">0, 0</span>
                </span>
            </td>
        </tr>
    </table>
    <p>
        Draw:&nbsp;&nbsp;
        <select id="shapeSelect" value="line">
            <option value="line">Line</option>
            <option value="square">Square</option>
            <option value="circle">Circle</option>
        </select>
    </p>
    <p>
        Select Line Color:&nbsp;&nbsp;<input type="color" id="lineColor"/>
    </p>
    <p>
        Select Fill Color:&nbsp;&nbsp;<input type="color" id="fillColor"/>
    </p>
    <p>
        <span style="text-decoration: underline;">Line Width:</span></br>
        <input type="range" id="lineWidth" min="1" max="30" value="10"/></br>
        <span id="rangeValueContainer">10</span></br>
    </p>
    <p>
        <input id="eraseBtn" type="button" value="Erase"/>
    </p>
  </body>

Answer 1

scopes存在问题。

将所有脚本移到一个$(document).ready()下，

即

$(document).ready(function (){

    var c=document.getElementById("drawBox");
   ...
   $('#drawBox').mousemove(function (){
   ...
   });

   etc.

});

通过将每个代码段包含在单独的function(){}块中，您可以隔离其中的变量。

看起来好像你的画布没有任何尺寸。尝试设置其大小，

<canvas id="drawBox" width="200px" height="200px">Your browser does not support the HTML5 canvas tag.</canvas>

Answer 2

您的绘图是正确的，但有两个问题 -

您添加了几个单独的$（document）.ready函数，每个函数都有单独的范围，这就是为什么你的变量都没有存活
您没有使用jQuery事件对象来获取客户端位置 - 请参阅jquery api

这是一个有用的版本jsfiddle

Answer 3

好的，这里。首先，永远不要假设您的代码是正确的。如果它不起作用，你的代码显然是不正确的。在这种情况下，它不是一个错误。您当前的实施有两个问题：

你的定位很远。我怀疑你的线条是不可见的，因为它远离画布呈现。
您需要使用.beginPath()和.closePath()这有助于防止路径绘图中出现不可预测的行为。

解决方案问题在于您是在css中定义画布的尺寸而不是画布元素本身。

工作解决方案 http://jsfiddle.net/crbHg/9/

HTML 5绘图线不起作用

3 个答案: