0
ユーザーが最初にクリックしたときまで、ユーザーがキャンバス上でクリックするすべての点を描画します。私はそれらを隠し入力に格納することができますが、描画/表示（ "ctx.fillRect（pos_x、pos_y、1、1）;"）を画面上に適切に表示することはできません。私のコードは何ですか？私は最初の点を見るだけで、クリックした場所（IE Edgeを使って見る）にさえいません。最終的には、ポイントによって描画された線を追加したいと思います。ポイントを描画するHTML5の2Dコンテキストを取得できません
また、余分なものとして、コードがコンテキストメニューを検出している時間にキャンバス内にクリックが含まれていたかどうかを判断する手助けをすることができますか？
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var c;
var ctx;
function wireUp()
{
// Initiate context. Do only once
c = document.getElementById('imgContainer');
ctx = c.getContext('2d');
// Store points
keepPoints('hiddenMap');
// Override context when user has clicked within the canvas
window.oncontextmenu = function()
{
// TO DO: Detect click was within canvas area
clearMap('imgContainer', 'hiddenMap');
return false; // cancel default menu
}
document.getElementById('imgContainer').onclick = function (e) {
// Detect RMB. See: http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event
var isRightMB;
e = e || window.event;
if ("which" in e) // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
isRightMB = e.which == 3;
else if ("button" in e) // IE, Opera
isRightMB = e.button == 2;
if(!isRightMB)
{
pointDetected('imgContainer', 'hiddenMap', e);
}
else
{ // Clear points, drawn and on map
alert("RMB");
clearMap('imgContainer', 'hiddenMap');
}
};
}
function clearMap(container, map)
{
// Clear drawn points
var canvas = document.getElementById(container);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Clear map
var hMap = document.getElementById(map);
hMap.value = "";
}
function pointDetected(container, map, event)
{
//alert("Oh my! " + container);
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(container).offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(container).offsetTop;
//alert(pos_x + ", " + pos_y);
var hMap = document.getElementById(map);
if(hMap.value) // Check if the map has already points and append with comma
{
hMap.value = hMap.value + "; " + pos_x + ", " + pos_y;
}
else
{
hMap.value = pos_x + ", " + pos_y;
}
alert(hMap.value);
// Draw a point where clicked
ctx.fillRect(pos_x, pos_y, 1, 1);
}
function keepPoints(container)
{
// Stores all the points that the user has selected
var hidden = document.createElement("input");
var typeAtt = document.createAttribute("type");
typeAtt.value = "hidden";
hidden.setAttributeNode(typeAtt);
hidden.id = container;
document.body.appendChild(hidden);
}
</script>
</head>
<body onload="wireUp();">
<canvas style="background:url('untitled.png');width:819px;height:460px;border-style:solid;" id="imgContainer">
</canvas>
</body>
その 'width'と' height'プロパティを使用し、唯一のCSSを通して、あなたのキャンバスのサイズを設定しないでください。 – Kaiido
ありがとう、@Kaiido、それは助けた。コードを投稿する。 – Jaquio