私はすでにこのサイトと他の多くのサイトでこの質問への回答を検索しましたが、すべてのサイト（このサイトとw3schoolsを含む）によると、HTML5でcanvasを使用して線を引くには次のように機能するはずです。
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();
上記の行は私のコードの抜粋であり、以下の完全なコード自体ではないことに注意してください。
私は自分が持っている課題のために簡単な描画プログラムを書こうとしていますが、何らかの理由で（そしてこれを行うさまざまな方法をテストしました）、それは単に線を描画しません。エラーをスローすることはなく、線を引くことはありません。私はGoogleChromeを使用しています（私の理解では、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()言っていますが、他のサイト（つまり、w3schools）はどちらも使用しないと言っていますか？それらは必要ですか？彼らのポイントは何ですか？それらはまったく必要ですか、それとも特定の状況下で必要ですか？最終的には、このプログラムで正方形や円を描く必要があります。beginPath()closePath()
どんな助けでも大歓迎です。
この投稿が少しずさんな場合は申し訳ありませんが、試しましたが、これは私の最初の投稿であり、何かがコードであることを認識するこのサイトの部分が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>