HTML5 Canvas是一個(gè)強(qiáng)大的圖形處理工具，可以用來(lái)繪制各種圖形，橡皮擦功能可以通過(guò)監(jiān)聽(tīng)鼠標(biāo)事件來(lái)實(shí)現(xiàn)，當(dāng)用戶(hù)在畫(huà)布上點(diǎn)擊時(shí)，將該像素的顏色設(shè)置為透明，從而實(shí)現(xiàn)橡皮擦的效果。

創(chuàng)新互聯(lián)公司是一家以重慶網(wǎng)站建設(shè)公司、網(wǎng)頁(yè)設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、seo優(yōu)化、小程序App開(kāi)發(fā)等移動(dòng)開(kāi)發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為生料攪拌車(chē)等眾行業(yè)中小客戶(hù)提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開(kāi)發(fā)服務(wù)。

以下是一個(gè)簡(jiǎn)單的HTML5 Canvas橡皮擦實(shí)現(xiàn)：

1、創(chuàng)建一個(gè)HTML文件，添加一個(gè)元素和一個(gè)元素，用于切換橡皮擦和畫(huà)筆功能。

橡皮擦

2、創(chuàng)建一個(gè)JavaScript文件（script.js），編寫(xiě)以下代碼：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const eraserBtn = document.getElementById('eraserBtn');
let isErasing = false;
// 初始化畫(huà)布背景顏色
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 監(jiān)聽(tīng)鼠標(biāo)按下事件
canvas.addEventListener('mousedown', (e) => {
    isErasing = true;
});
// 監(jiān)聽(tīng)鼠標(biāo)抬起事件
canvas.addEventListener('mouseup', () => {
    isErasing = false;
});
// 監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件
canvas.addEventListener('mousemove', (e) => {
    if (isErasing) {
        const x = e.clientX canvas.offsetLeft;
        const y = e.clientY canvas.offsetTop;
        ctx.clearRect(x 1, y 1, 3, 3);
    } else {
        // 畫(huà)筆功能
        ctx.beginPath();
        ctx.arc(e.clientX canvas.offsetLeft, e.clientY canvas.offsetTop, 5, 0, Math.PI * 2);
        ctx.fillStyle = '#000';
        ctx.fill();
    }
});
// 監(jiān)聽(tīng)按鈕點(diǎn)擊事件，切換橡皮擦和畫(huà)筆功能
eraserBtn.addEventListener('click', () => {
    isErasing = !isErasing;
    eraserBtn.innerText = isErasing ? '橡皮擦' : '畫(huà)筆';
});

這個(gè)示例中，我們首先獲取了元素和元素，然后設(shè)置了畫(huà)布的背景顏色，接著，我們監(jiān)聽(tīng)了鼠標(biāo)的按下、抬起和移動(dòng)事件，實(shí)現(xiàn)了橡皮擦和畫(huà)筆功能，我們監(jiān)聽(tīng)了按鈕的點(diǎn)擊事件，用于切換橡皮擦和畫(huà)筆功能。

文章標(biāo)題：HTMLHTML5Canvas橡皮擦
文章轉(zhuǎn)載：http://uogjgqi.cn/article/coocihi.html