1
私はマウスを使って操作できるキャンバスを作成しようとしています（ドラッグ、描画、クリックなど）。これは単純な作業のようです。現在、私はそれがリリースされるまで、マウスが押された場所から今のところまで線を引いています。しかし、私がキャンバスをクリアするかどうかに関わらず、古いバージョンの行はすべて引き続き描画されます。私はbeginPath/closePathを使用してストロークの代わりに塗りつぶしてみました。どちらのアプローチでも、この行は決して出現しませんでした。私が見つけることができなかったドロー操作のいくつかの "デリミタ"はありますか？HTML5：キャンバスに古いピクセルを忘れさせるにはどうすればよいですか？
ソースは表示され、テストされますhere、私はまたそれを以下に含めました。
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="test" width="640" height="480"></canvas>
<script type="text/javascript">
(function(){
// http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
function getMousePos(obj, evt){
// get canvas position
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
x: mouseX,
y: mouseY
};
}
var canvasElement = document.getElementById('test');
if(canvasElement.getContext){
var canvas = canvasElement.getContext('2d');
var start = null;
var end = null;
var drawing = false;
canvasElement.addEventListener('mousedown', function (event){
var mousePos = getMousePos(canvasElement, event);
start = mousePos;
end = mousePos;
drawing = true;
}, false);
canvasElement.addEventListener('mousemove', function (event){
if(drawing){
end = getMousePos(canvasElement, event);
}
}, false);
function release(event){
drawing = false;
}
canvasElement.addEventListener('mouseup', release, true);
var FPS = 30;
setInterval(function() {
canvas.clearRect(0, 0, canvasElement.width, canvasElement.height);
if(drawing && start != null){
canvas.moveTo(start.x, start.y);
canvas.lineTo(end.x, end.y);
canvas.stroke();
}
}, 1000/FPS);
}
})();
</script>
</body>
</html>
endPathはIRCで正しく述べたclosePathである必要があります。 – Grault