1. 程式人生 > >Canvas實現滑鼠在網頁上塗畫

Canvas實現滑鼠在網頁上塗畫

使用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>