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