html - HTML 5 绘图线不起作用

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()and 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>

score 1 · Accepted Answer

你对范围有问题。

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

IE，

$(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>

score 0 · Accepted Answer

好的，这就去。首先，永远不要假设你的代码是正确的。如果它不起作用，则您的代码显然不正确。在这种情况下，它不是错误。您当前的实现有两点错误：

你的定位很差。我有一个偷偷摸摸的怀疑，你的线是不可见的，因为它被渲染远离画布。
您需要使用.beginPath()， .closePath()这将有助于防止路径图中出现不可预知的行为。

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

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

score 0 · Accepted Answer

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

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

这是一个工作版本的jsfiddle

html - HTML 5 绘图线不起作用

3 回答 3

Related

Reference