canvasで、ctx.moveTo(startX, startY);ctx.lineTo(x, y);ctx.stroke();で線を描画します。canvas.toDataURL().replace(‘image/png’,’application/octet-stream’)で、画像をダウンロードします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#mycanvas{
border: 10px solid #999;
cursor: crosshair;
}
.thumbnail{
border: 2px solid #999;
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Canvas</h1>
<p>
<select id="penColor">
<option value="black">黒</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="white">白</option>
</select>
<select id="penWidth">
<option value="1">細</option>
<option value="3">中</option>
<option value="5">太</option>
</select>
<input type="button" id="erase" value="消去">
<input type="button" id="save" value="ギャラリーに追加">
</p>
<canvas id="mycanvas" width="400" height="200">
Canvasの対応ブラウザを使用ください。</canvas>
<div id="gallery"></div>
<p>
</p>
<script>
$(function(){
var canvas = document.getElementById('mycanvas');
if (!canvas || !canvas.getContext) return false;
var ctx = canvas.getContext('2d');
var startX,
startY,
x,
y,
borderWidth = 10,
isDrawing = false;
$('#mycanvas').mousedown(function(e){
isDrawing = true;
startX = e.pageX - $(this).offset().left - borderWidth;
startY = e.pageY - $(this).offset().top - borderWidth;
})
.mousemove(function(e){
if (!isDrawing) return;
x = e.pageX - $(this).offset().left - borderWidth;
y = e.pageY - $(this).offset().top - borderWidth;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(x, y);
ctx.stroke();
startX = x;
startY = y;
})
.mouseup(function() {
isDrawing = false;
})
.mouseleave(function(){
isDrawing = false;
});
$('#penColor').change(function(){
ctx.strokeStyle = $(this).val();
});
$('#penWidth').change(function(){
ctx.lineWidth = $(this).val();
});
$('#erase').click(function(){
if(!confirm('本当に消去しますか？')) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
$('#save').click(function(){
var img = $('<img>').attr({
width: 100,
height: 50,
src: canvas.toDataURL()
});
var link = $('<a>').attr({
href: canvas.toDataURL().replace('image/png','application/octet-stream'),
download: new Date().getTime() + '.png'
});
$('#gallery').append(link.append(img.addClass('thumbnail')));
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
});
</script>
</body>
</html>
