Skip to content

Instantly share code, notes, and snippets.

@kurotanshi
Last active May 19, 2019
Embed
What would you like to do?
Canvas Paint Demo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>History API & Canvas Demo</title>
<style>
#canvas{ display: block; width: 300px; height: 300px; border: 1px solid #000; }
#color-selector{ display: block; margin:10px 0; height: 25px; line-height: 25px; }
#color-selector > span{
display: inline-block; width: 20px; height: 20px; margin-right: 5px; cursor: pointer;
}
.black{ background-color: black; }
.red{ background-color: red; }
.orange{ background-color: orange; }
.cyan{ background-color: cyan; }
.blue{ background-color: blue; }
.green{ background-color: green; }
.magenta{ background-color: magenta; }
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<div id="color-selector">
<span class="black"></span>
<span class="red"></span>
<span class="orange"></span>
<span class="cyan"></span>
<span class="blue"></span>
<span class="green"></span>
<span class="magenta"></span>
</div>
<button class="back" disabled>復原</button>
<button class="load">讀取</button>
<button class="save">儲存</button>
<button class="clear">清除</button>
<script>
// 初始化設定
var canvas = document.getElementById('canvas');
var colors = document.querySelectorAll('#color-selector > span');
var back = document.querySelector('.back'),
load = document.querySelector('.load'),
save = document.querySelector('.save'),
clear = document.querySelector('.clear');
if( !localStorage.image ){ load.disabled = true; }
var context = canvas.getContext('2d');
context.lineWidth = 4;
context.strokeStyle = '#000';
var isDrawing = false;
var state = context.getImageData(0, 0, canvas.width, canvas.height);
window.history.pushState(state, null);
// 切換顏色
for( var i = 0; i < colors.length; i++ ){
colors[i].addEventListener('click', function(){
context.strokeStyle = this.className;
}, false);
}
// 復原
back.addEventListener('click', function(){
window.history.go(-1);
}, false);
// 清除
clear.addEventListener('click', function(){
context.clearRect(0, 0, canvas.width, canvas.height);
}, false);
// 儲存
save.addEventListener('click', function(){
localStorage.setItem('image', canvas.toDataURL() );
load.disabled = false;
alert('已儲存');
}, false);
// 讀取
load.addEventListener('click', function(){
var img = new Image();
img.src = localStorage.getItem('image');
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0);
}, false);
// canvas 滑鼠操作事件
canvas.addEventListener('mousedown', startDarw, false);
canvas.addEventListener('mousemove', drawing, false);
canvas.addEventListener('mouseup', stopDrawing, false);
// popstate 事件
window.addEventListener('popstate', changeStep, false);
function changeStep(e){
// 清除畫布
context.clearRect(0, 0, canvas.width, canvas.height);
if(e.state){
context.putImageData(e.state, 0, 0);
}
}
function stopDrawing(e){
isDrawing = false;
back.disabled = false;
var state = context.getImageData(0, 0, canvas.width, canvas.height);
window.history.pushState(state, null);
}
function drawing(e){
if(isDrawing){
context.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
context.stroke();
}
}
function startDarw(e){
isDrawing = true;
context.beginPath();
context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment