0
この描画アプリケーションのキャンバス上の位置を取得することに問題があります。エラー状態xPos、yPosが定義されていません。キャンバスに描画しますが、行位置はオフです。私は何が欠けていますか？あなたは以下に添付のコード内のコードをチェックアウトすることができます：あなたが実際にキャンバスを拡大縮小しているキャンバス上の位置offsetTopとoffsetLeft
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 2;
var down = false;
function draw(e) {
xPos = e.clientX - canvas.offsetLeft;
yPos = e.clientY - canvas.offsetTop;
if (down === true) {
context.lineTo(xPos, yPos);
context.stroke();
}
}
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', function() {
down = true;
context.beginPath();
context.moveTo(xPos, yPos);
canvas.addEventListener("mousemove", draw);
});
canvas.addEventListener('mouseup', function() {
down = false;
});*,
*:before,
*:after {
box-sizing: border-box;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font: 16px/1 sans-serif;
font-family: 'Questrial', sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
margin: 0;
padding: 0;
}
main,
li {
display: block;
}
h1,
h2,
h3,
h4 {
font-size: inherit;
}
strong {
font-weight: bold;
}
a,
button {
color: inherit;
transition: .3s;
}
a {
text-decoration: none;
}
button {
overflow: visible;
border: 0;
font: inherit;
-webkit-font-smoothing: inherit;
letter-spacing: inherit;
background: none;
cursor: pointer;
}
::-moz-focus-inner {
padding: 0;
border: 0;
}
:focus {
outline: 0;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
section {
padding-top: 20px;
padding-bottom: 20px;
margin: 20px auto;
}
section #canvas {
width: 800px;
height: 500px;
display: block;
border: 1px solid black;
margin: 10px auto 0px;
}
section #drawingTools {
width: 800px;
height: 80px;
margin: 0 auto;
}
section #drawingTools #colors {
width: 100%;
height: 20px;
}
section #drawingTools #colors button {
width: 20%;
height: 20px;
float: left;
}
section #drawingTools #colors button:hover {
opacity: 0.5;
}
section #drawingTools #colors #black {
background: black;
}
section #drawingTools #colors #white {
background: white;
}
section #drawingTools #colors #red {
background: red;
}
section #drawingTools #colors #green {
background: green;
}
section #drawingTools #colors #blue {
background: blue;
}
section #drawingTools #otherTools {
width: 100%;
height: 60px;
}
section #drawingTools #otherTools button {
width: 100%;
height: 50px;
margin-top: 5px;
background: #303030;
color: white;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 5px;
cursor: pointer;
}
section #drawingTools #otherTools button:hover {
font-size: 13px;
}<section>
<div id="drawingTools">
<div id="colors">
<button id="black"></button>
<button id="white"></button>
<button id="red"></button>
<button id="green"></button>
<button id="blue"></button>
</div>
<div id="otherTools">
<button id="clearCanvas">Clear Canvas</button>
</div>
</div>
<canvas id="canvas"></canvas>
</section>
これはあなたのソリューションです - http://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas –