這篇文章主要介紹了基於canvas剪輯區域功能實現橡皮擦效果,非常不錯，具有參考借鑑價值，需要的朋友可以參考下
效果如圖
這是基礎結構 沒什麼好說的
?
Document
582735936
Stroke color:
Fill color:
Draw
Erase
Eraser:
Eraser width:
下面是重點的js
這裡有個坑要十分注意 調用clip()方法的時候，所定義的剪輯區域總是侷限於期初的那個剪輯區域範圍。
簡單來說 clip()方法總是在上一次的剪輯區域基礎上進行操作，所以說我們要把clip()方法放在save()和restore()方法中
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
strokeStyleSelect = document.getElementById('strokeStyleSelect'), //畫圖的描邊顏色
fillStyleSelect = document.getElementById('fillStyleSelect'), //畫圖填充顏色
drawRadio = document.getElementById('drawRadio'), //畫圖按鈕
eraserRadio = document.getElementById('eraserRadio'), //橡皮擦按鈕
eraserShapeSelect = document.getElementById('eraserShapeSelect'), //橡皮擦形狀
eraserWidthSelect = document.getElementById('eraserWidthSelect'), //橡皮擦寬度
ERASER_LINE_WIDTH = 1,
drawingSurfaceImageData,
lastX,
lastY,
mousedown = {},
rubberbandRect = {},
dragging = false
function windowToCanvas(x,y){ //這個函數的作用是捕捉鼠標點在canvas上的座標
var bbox=canvas.getBoundingClientRect()
return {
x:x-bbox.left,
y:y-bbox.top
}
}
function saveDrawingSurface(){ //這個函數的作用是初始化讀取畫布信息並儲存起來
drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height)
}
function restoreDrawingSurface(){ //這個函數的作用是讀取畫布信息
context.putImageData(drawingSurfaceImageData,0,0)
}
function drawGrid(){ //這個函數的作用是填充進橡皮擦的剪輯區域
context.save()
context.fillStyle="#fff"
context.fillRect(0,0,canvas.width,canvas.height)
context.restore()
}
function drawrubber(x,y){
context.beginPath()
context.arc(x,y,eraserWidthSelect.value,0,Math.PI*2,false)
context.clip()
}
function drawCri(x,y){
var x_width=Math.abs(x-mousedown.x)
var y_width=Math.abs(y-mousedown.y)
var radius=Math.sqrt(x_width*x_width+y_width*y_width)
context.save()
context.beginPath()
context.fillStyle=fillStyleSelect.value;
context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false)
context.fill()
context.restore() 582735936
}
canvas.onmousedown=function(e){
var loc=windowToCanvas(e.clientX,e.clientY)
mousedown.x=loc.x
mousedown.y=loc.y
lastX=loc.x
lastY=loc.y
saveDrawingSurface()
dragging=true
}
canvas.onmousemove=function(e){
if(dragging){
var loc=windowToCanvas(e.clientX,e.clientY)
if(drawRadio.checked){ //如果是畫圖狀態
//
restoreDrawingSurface()
drawCri(loc.x,loc.y)
}else{ //如果是橡皮擦狀態
context.save()
drawrubber(loc.x,loc.y)
drawGrid()
context.restore()
}
}
}
canvas.onmouseup=function(e){
dragging=false;
var loc=windowToCanvas(e.clientX,e.clientY)
if(drawRadio.checked){
lastX=loc.x;
lastY=loc.y; 582735936
restoreDrawingSurface()
drawCri(lastX,lastY)
}else{
context.save()
drawrubber(loc.x,loc.y)
drawGrid()
context.restore()
}
}
總結
以上所述是小編給大家介紹的基於canvas剪輯區域功能實現橡皮擦效果
分享到:
閱讀更多 前端嫣然呀呀呀 的文章
