HTML5 Canvas笔记——实现橡皮擦功能,包括矩形擦和圆形擦。

编程实现橡皮擦功能,包括矩形擦和圆形擦。

注:需要在以前的某个绘图程序的基础上,才能实现擦除功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>橡皮擦功能</title>
    <style>
        body {
            background: #eeeeee;
        }
        #controls {
            position: absolute;
            left: 25px;
            top: 25px;
        }
        #canvas {
            background: #ffffff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id='controls'>
        描边颜色: <select id='strokeStyleSelect'>
                 <option value='red'>red</option>
                 <option value='green'>green</option>
                 <option value='blue'>blue</option>
                 <option value='orange'>orange</option>
                 <option value='cornflowerblue'>cornflowerblue</option>
                 <option value='goldenrod'>goldenrod</option>
                 <option value='navy' selected>navy</option>
                 <option value='purple'>purple</option>
                 <option value='purple'>purple</option>
               </select>
        填充颜色: <select id='fillStyleSelect'>
                 <option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
                 <option value='green'>green</option>
                 <option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>
                 <option value='orange'>orange</option>
                 <option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>
                 <option value='goldenrod' selected>goldenrod</option>
                 <option value='navy'>navy</option>
                 <option value='purple'>purple</option>
               </select>
        画图  <input id='drawRadio' name='drawEraserRadios' type='radio' checked/>
        橡皮擦 <input id='eraserRadio' name='drawEraserRadios' type='radio'/>
        橡皮擦形状: <select id='eraserShapeSelect'>
                <option value='circle'>circle</option>
                <option value='square'>square</option>
               </select> 
        橡皮擦大小 <select id='eraserWidthSelect'>
                <option value=25>25</option>
                <option value=50>50</option>
                <option value=75>75</option>
                <option value=100>100</option>
                <option value=125>125</option>
                <option value=150>150</option>
                <option value=175>175</option>
                <option value=200>200</option>
               </select>
       </div>
    <canvas id="canvas" width="950" height="500"></canvas>
    <script src="橡皮擦功能.js"></script>
</body>
</html>

橡皮擦功能.js

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,
    ERASER_SHADOW_COLOR='rgb(0,0,0)',

    ERASER_SHADOW_STYLE='blue',
    ERASER_STROKE_STYLE='rgb(0,0,255)',
    ERASER_SHADOW_OFFSET=-5,
    EARSER_SHADOW_BLUR=20,

    GRID_HORIZONTAL_SPACING=10,
    GRID_VERTICAL_SPACING=10,
    GRID_LINE_COLOR='lightblue',
    drawingSurfaceImageData,

    lastX,
    lastY,
    mousedown={},
    rubberbandRect={},
    dragging=false,
    guidewires=true;

//填充橡皮擦
function drawGrid(color, stepx, stepy) {
   context.save()

   context.strokeStyle = color;
   context.fillStyle = '#ffffff';
   context.lineWidth = 0.5;
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);

   for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
     context.beginPath();
     context.moveTo(i, 0);
     context.lineTo(i, context.canvas.height);
     context.stroke();
   }

   for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
     context.beginPath();
     context.moveTo(0, i);
     context.lineTo(context.canvas.width, i);
     context.stroke();
   }

   context.restore();
}
//捕捉鼠标点在canvas上的坐标
function windowToCanvas(x,y) {
   var bbox = canvas.getBoundingClientRect();

   return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
          };
}
//初始化读取画布信息并储存
function saveDrawingSurface() {
   drawingSurfaceImageData = context.getImageData(0, 0,
                             canvas.width,
                             canvas.height);
}
//读取画布信息
function restoreDrawingSurface() {
   context.putImageData(drawingSurfaceImageData, 0, 0);
}
function updateRubberbandRectangle(loc) {
   rubberbandRect.width = Math.abs(loc.x - mousedown.x);
   rubberbandRect.height = Math.abs(loc.y - mousedown.y);

   if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
   else                     rubberbandRect.left = loc.x;

   if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
   else                     rubberbandRect.top = loc.y;
} 

function drawRubberbandShape(loc) {
   var angle=Math.atan(rubberbandRect.height/rubberbandRect.width),
       radius=rubberbandRect.height/Math.sin(angle);

   if(mousedown.y===loc.y){
     radius=Math.abs(loc.x-mousedown.x);
   }

   context.beginPath();
   context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false);
   context.stroke();
   context.fill();
}
function updateRubberband(loc) {
   updateRubberbandRectangle(loc);
   drawRubberbandShape(loc);
}
// Guidewires....................................................

function drawHorizontalLine (y) {
   context.beginPath();
   context.moveTo(0,y+0.5);
   context.lineTo(context.canvas.width,y+0.5);
   context.stroke();
}

function drawVerticalLine (x) {
   context.beginPath();
   context.moveTo(x+0.5,0);
   context.lineTo(x+0.5,context.canvas.height);
   context.stroke();
}

function drawGuidewires(x, y) {
   context.save();
   context.strokeStyle = 'rgba(0,0,230,0.4)';
   context.lineWidth = 0.5;
   drawVerticalLine(x);
   drawHorizontalLine(y);
   context.restore();
}
//橡皮擦。矩形擦和圆形擦
function setDrawPathForEraser(loc){
    var eraserWidth=parseFloat(eraserWidthSelect.value);
    context.beginPath();

    if(eraserShapeSelect.value==='circle'){
        context.arc(loc.x,loc.y,eraserWidth/2,0,Math.PI*2,false);

    }
    else{
        context.rect(loc.x-eraserWidth/2,loc.y-eraserWidth/2,eraserWidth,eraserWidth);

    }
    context.clip();
}
function setErasePathForEraser(){
    var eraserWidth=parseFloat(eraserWidthSelect.value);

    context.beginPath();

    if(eraserShapeSelect.value==='circle'){
        context.arc(lastX,lastY,eraserWidth/2+ERASER_LINE_WIDTH,0,Math.PI*2,false);

    }
    else{
        context.rect(lastX-eraserWidth/2-ERASER_LINE_WIDTH,lastY-eraserWidth/2-ERASER_LINE_WIDTH,eraserWidth+ERASER_LINE_WIDTH*2,eraserWidth+ERASER_LINE_WIDTH*2);
    }
    context.clip();
}
function setEraseAttributes(){
    context.lineWidth=ERASER_LINE_WIDTH;
    context.shadowColor=ERASER_SHADOW_STYLE;
    context.shadowOffsetX=ERASER_SHADOW_OFFSET;
    context.shadowOffsetY=ERASER_SHADOW_OFFSET;
    context.shadowBlur=EARSER_SHADOW_BLUR;
    context.strokeStyle=ERASER_STROKE_STYLE;

}
function eraseLast(){
    context.save();

    setErasePathForEraser();
    drawGrid(GRID_LINE_COLOR,GRID_HORIZONTAL_SPACING,GRID_VERTICAL_SPACING);
    context.restore();
}
function drawEraser(loc){
    context.save();

    setEraseAttributes();
    setDrawPathForEraser(loc);
    context.stroke();
    context.restore();
}

//Canvas event handlers..................................

canvas.onmousedown=function(e){
    var loc=windowToCanvas(e.clientX,e.clientY);

    e.preventDefault();
    if(drawRadio.checked){
        saveDrawingSurface();
    }
    mousedown.x=loc.x;
    mousedown.y=loc.y;
    lastX=loc.x;
    lastY=loc.y;
    dragging=true;
};
//画图状态和橡皮状态切换
canvas.onmousemove=function(e){
    var loc;
    if(dragging){
        e.preventDefault();

        loc=windowToCanvas(e.clientX,e.clientY);

        if(drawRadio.checked){
            restoreDrawingSurface();
            updateRubberband(loc);
            if(guidewires){
                drawGuidewires(loc.x,loc.y);
            }
        }
        else{
            eraseLast();
            drawEraser(loc);
        }
        lastX=loc.x;
        lastY=loc.y;
    }
};
canvas.onmouseup=function(e){
    loc=windowToCanvas(e.clientX,e.clientY);

    if(drawRadio.checked){
        restoreDrawingSurface();
        updateRubberband(loc);
    }
    if(eraserRadio.checked){
        eraseLast();
    }
    dragging=false;
};
strokeStyleSelect.onchange=function(e){
    context.strokeStyle=strokeStyleSelect.value;
};
fillStyleSelect.onchange=function(e){
    context.fillStyle=fillStyleSelect.value;
};

//Initialization.....................................
context.strokeStyle=strokeStyleSelect.value;
context.fillStyle=fillStyleSelect.value;
drawGrid(GRID_LINE_COLOR,GRID_HORIZONTAL_SPACING,GRID_VERTICAL_SPACING);

效果如图:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351