HTML5 キャンバスを使用してペイント アプリケーションを作成します。背景画像を使用しています。ただし消しゴム付き。削除すると次の画像も削除されます。誰が私を助けることができます？
この HTML :
<form>
<div>
<label for="pencil">Pencil</label>
<input id="pencil" type="radio" name="tool" value="pencil" checked>
</div>
<div>
<label for="eraser">Eraser</label>
<input id="eraser" type="radio" name="tool" value="eraser">
</div>
</form>
<div id="sketch">
<canvas id="paint"></canvas>
</div>
そしてJavascript：
(function() {
var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
// draw image
var img = new Image();
img.src = 'http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg';
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Determine Tool
var tool = 'pencil';
document.querySelector('#pencil').onchange = function() {
if (this.checked)
tool = 'pencil';
// Show Tmp Canvas
tmp_canvas.style.display = 'block';
};
document.querySelector('#eraser').onchange = function() {
if (this.checked)
tool = 'eraser';
// Hide Tmp Canvas
tmp_canvas.style.display = 'none';
};
// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;
sketch.appendChild(tmp_canvas);
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
// Pencil Points
var ppts = [];
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function(e) {
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);
canvas.addEventListener('mousemove', function(e) {
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);
/* Drawing on Paint App */
tmp_ctx.lineWidth = 5;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = 'blue';
tmp_ctx.fillStyle = 'blue';
tmp_canvas.addEventListener('mousedown', function(e) {
tmp_canvas.addEventListener('mousemove', onPaint, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push({x: mouse.x, y: mouse.y});
onPaint();
}, false);
tmp_canvas.addEventListener('mouseup', function() {
tmp_canvas.removeEventListener('mousemove', onPaint, false);
ctx.globalCompositeOperation = 'source-over';
// Writing down to real canvas now
ctx.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
// Emptying up Pencil Points
ppts = [];
}, false);
var onPaint = function() {
// Saving all the points in an array
ppts.push({x: mouse.x, y: mouse.y});
if (ppts.length < 3) {
var b = ppts[0];
tmp_ctx.beginPath();
//ctx.moveTo(b.x, b.y);
//ctx.lineTo(b.x+50, b.y+50);
tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, !0);
tmp_ctx.fill();
tmp_ctx.closePath();
return;
}
// Tmp canvas is always cleared up before drawing.
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
tmp_ctx.beginPath();
tmp_ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i++) {
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
tmp_ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
tmp_ctx.stroke();
};
canvas.addEventListener('mousedown', function(e) {
canvas.addEventListener('mousemove', onErase, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push({x: mouse.x, y: mouse.y});
onErase();
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onErase, false);
// Emptying up Pencil Points
ppts = [];
}, false);
var onErase = function() {
// Saving all the points in an array
ppts.push({x: mouse.x, y: mouse.y});
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.strokeStyle = 'rgba(0,0,0,1)';
ctx.lineWidth = 5;
if (ppts.length < 3) {
var b = ppts[0];
ctx.beginPath();
//ctx.moveTo(b.x, b.y);
//ctx.lineTo(b.x+50, b.y+50);
ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0);
ctx.fill();
ctx.closePath();
return;
}
// Tmp canvas is always cleared up before drawing.
// ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i++) {
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
ctx.stroke();
};
}());
リンクデモ : デモ