1
拡大可能な画像ビューアを作成しようとしています。ズームファクタまたは画像サイズが、画像がキャンバス全体に塗りつぶされないようなものである場合、指定された背景色で塗りつぶされた画像を含まないキャンバスの領域を持つことを望みます。キャンバス内の画像がパンするとタイル状の軌跡が残る
現在の実装では、ズーム操作とパン操作が可能ですが、パン操作中に画像がタイル張りの軌跡を残すという望ましくない効果があります（ゲームに勝利したときのソリティソリティアのカードとよく似ています）。画像が軌跡を残さず、背景の矩形がキャンバスに正しくレンダリングされるようにキャンバスをクリーンアップするにはどうすればよいですか？
暗い灰色の背景が表示されるレベルに、不要なエフェクト設定倍率を再作成し、マウスで画像をパンします（マウスを下にドラッグします）。
コードスニペットを下に追加し、Plnkrリンクを参照してください。あなたが変換をリセットする必要が http://plnkr.co/edit/Cl4T4d13AgPpaDFzhsq1
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:solid 5px #333;
}
</style>
</head>
<body>
\t <button onclick="changeScale(0.10)">+</button>
\t <button onclick="changeScale(-0.10)">-</button>
\t
<div id="container">
<canvas width="700" height="500" id ="canvas1"></canvas>
</div>
<script>
var canvas = document.getElementById('canvas1');
var context = canvas.getContext("2d");
var imageDimensions ={width:0,height:0};
var photo = new Image();
var isDown = false;
var startCoords = [];
var last = [0, 0];
var windowWidth = canvas.width;
var windowHeight = canvas.height;
var scale=1;
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "http://www.html5rocks.com/static/images/cors_server_flowchart.png";
function eventPhotoLoaded(e) {
imageDimensions.width = photo.width;
imageDimensions.height = photo.height;
drawScreen();
}
function changeScale(delta){
scale += delta;
drawScreen();
}
function drawScreen(){
context.fillRect(0,0, windowWidth, windowHeight);
context.fillStyle="#333333";
context.drawImage(photo,0,0,imageDimensions.width*scale,imageDimensions.height*scale);
}
canvas.onmousedown = function(e) {
isDown = true;
startCoords = [
e.offsetX - last[0],
e.offsetY - last[1]
];
};
canvas.onmouseup = function(e) {
isDown = false;
last = [
e.offsetX - startCoords[0], // set last coordinates
e.offsetY - startCoords[1]
];
};
canvas.onmousemove = function(e)
{
if(!isDown) return;
var x = e.offsetX;
var y = e.offsetY;
context.setTransform(1, 0, 0, 1,
x - startCoords[0], y - startCoords[1]);
drawScreen();
}
</script>
</body>
</html>
たぶんcontext.save 'のようなもの（）; context.fillRect（0,0、windowWidth、windowHeight）; context.restore（）; 'setTransformはあなたが塗りつぶす矩形も変更します。 – Quarter2Twelve
あなたは正しいです。そのコメントを回答として作成したいのであれば、それをそのまま受け入れることができてうれしいです。 – mccainz