Canvas實現滑鼠在網頁上塗畫
阿新 • • 發佈:2019-02-14
使用Canvas
實現,滑鼠在網頁上進行塗抹繪畫。
效果如下:
主要是使用了canvas
繪圖,圖畫的軌跡是利用一張黑色圓點圖片重複繪製疊加而成,具備點選瀏覽器前進
或後退
按鈕的實現返回前一筆畫或後一筆畫的功能。
注意,因為這裡用到了getImageData()
方法,所以需要在Web
伺服器中開啟。
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title >Canvas Write</title>
<style>
#canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0;
}
#image{
// 把需要用來繪製軌跡的黑色圓點圖片隱藏起來
display: none;
}
</style>
</head>
<body>
<canvas id='canvas' width ='400' height='300'></canvas>
<img id='image' width='6' width='6' src="1.png" alt="">
</body>
</html>
<script>
var image=document.getElementById('image');
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var isDrawing=false;
var state=context.getImageData(0,0,canvas.width,canvas.height);
// 網頁剛初始化後,將初始狀態的網頁狀態存到瀏覽器快取中
history.pushState(state,null);
canvas.addEventListener('mousedown',startDrawing,false);
canvas.addEventListener('mousemove',draw,false);
canvas.addEventListener('mouseup',stopDrawing,false);
function startDrawing() {
// 使用此引數來規範滑鼠行為,只有滑鼠左鍵按下才能繪製軌跡
isDrawing=true;
}
function draw() {
if(isDrawing){
var sx=canvas.width/canvas.offsetWidth;
var sy=canvas.height/canvas.offsetHeight;
var x=sx*event.clientX-image.offsetWidth/2;
var y=sy*event.clientY-image.offsetHeight/2;
// 根據黑色圓點小圖片重複多次繪製軌跡
context.drawImage(image,x,y)
}
}
function stopDrawing() {
isDrawing=false;
var state=context.getImageData(0,0,canvas.width,canvas.height);
// 滑鼠左鍵彈起,表明當前軌跡結束,儲存當前狀態,以便於瀏覽器歷史記錄
history.pushState(state,null)
}
window.onpopstate =function loadState(e) {
// 瀏覽器後退功能,首先擦除當前畫布上所有內容
context.clearRect(0,0,canvas.width,canvas.height);
// 然後將前一個狀態繪製到網頁上
if(e.state){
context.putImageData(e.state,0,0);
}
}
</script>