【发布时间】：2012-08-11 02:15:02
【问题描述】：
我已经在这个网站和许多其他网站上搜索过这个问题的答案，但是根据每个网站（包括这个网站和 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();
请记住，以上几行是我的代码中的 sn-ps，而不是下面的完整代码本身。
我正在尝试为我的作业编写一个简单的绘图程序，但由于某种原因（并且我已经测试了不同的方法）它根本不会画线。它不会抛出任何错误，只是不会画线。我正在使用谷歌浏览器（据我了解，您可以完全信任使用 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:
<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: <input type="color" id="lineColor"/>
</p>
<p>
Select Fill Color: <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>
【问题讨论】：