0
我已经搜索过这个网站和许多其他人的回答这个问题，但根据每个网站（包括这一个和w3schools）下面应该工作绘制一条线使用画布在HTML5。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函数也可以正常工作，因为我用我知道会工作的其他代码测试它。下面是我一起工作的代码：
下面是修改后的代码（仍然没有虽然平局，尽管所有的好帮手SO FAR）
$(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>
你，知道了，既然你提到它，是有一定道理的，我会尽力的。 – VoidKing 2012-08-10 16:01:04
它有帮助，但它并没有使画布运作。我还没有得到任何反馈，所以，我想没有其他人可以弄清楚，哈哈，谢谢你的帮助，无论如何。 – VoidKing 2012-08-10 18:03:24