• 财政部:对原产于美国的500亿美元进口商品加征关税 2019-04-18
  • 李白是哪一种书法家? 2019-04-10
  • 重庆夜色让人如此沉醉文章中国国家地理网 2019-04-04
  • 男子高速酒驾飞出立交桥 车身粉碎人无碍 2019-03-30
  • 成都康弘药业集团股份有限公司董事长柯尊洪获第十二届人民企业社会责任奖年度人物奖 2019-03-30
  • 驻最高检纪检组健全廉政档案 力求精准"画像" 2019-03-27
  • 游客被指捡石子砸老虎 北京野生动物园:正在核实 2019-03-27
  • 10月26日十九大新闻发言人专题新闻发布会 2019-03-22
  • 多交140分“亚裔税”?哈佛大学被控歧视亚裔学生 2019-03-22
  • 男子农田挖到古董抠出吓得魂飞魄散 2019-03-17
  • 瑞典南部城市发生枪击案致5人伤 警方:与恐袭无关 2019-03-10
  • 西安幼升小入学难问题出在哪儿教育部门将统筹协调安排 2019-03-10
  • 传统强队集体慢热(世界杯纵横) 2019-03-10
  • 乌鲁木齐水磨沟区开建两座立体停车库 2019-03-10
  • 山西新闻网特约摄影师名单&山西视觉志 2019-02-05
  • 今天看啥
      热点:

        北京赛车pk10历史记录 www.zwahn.com

        基于canvas剪辑区域功能实现橡皮擦效果,canvas橡皮擦


        效果如图

        这是基础结构 没什么好说的

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
          *{padding: 0;margin: 0}
          a{text-decoration: none}
          img{border: none}
          ul,ol{list-style: none}
          br{font-size: 0;line-height: 0;font-size: 0}
          canvas{border: 1px solid red;background: white}
          body{background: gray;text-align: center}
          </style>
        </head>
        <body>
            <div id='controls'>
                Stroke color: <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>
                Fill color: <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>
                Draw <input id='drawRadio' name='drawEraserRadios' type='radio' checked/>
                Erase <input id='eraserRadio' name='drawEraserRadios' type='radio'/>
                Eraser: <select id='eraserShapeSelect'>
                        <option value='circle'>circle</option>
                        <option value='square'>square</option>
                       </select>
                Eraser width: <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="600"></canvas>
        </body>
        </html>
        <script src="./js/test9.js"></script>

        下面是重点的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()
        }
        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;
          restoreDrawingSurface()
          drawCri(lastX,lastY)
          }else{
          context.save()
          drawrubber(loc.x,loc.y)
          drawGrid()
          context.restore()
          }
        }

        总结

        以上所述是小编给大家介绍的基于canvas剪辑区域功能实现橡皮擦效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

        北京赛车pk10历史记录 www.zwahn.comtrue//www.zwahn.com/jcjc/1314435.htmlTechArticle基于canvas剪辑区域功能实现橡皮擦效果,canvas橡皮擦 效果如图 这是基础结构 没什么好说的 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta n...

        相关文章

        相关搜索: canvas 橡皮擦

        帮客评论

        视觉看点
      • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-04-18
      • 李白是哪一种书法家? 2019-04-10
      • 重庆夜色让人如此沉醉文章中国国家地理网 2019-04-04
      • 男子高速酒驾飞出立交桥 车身粉碎人无碍 2019-03-30
      • 成都康弘药业集团股份有限公司董事长柯尊洪获第十二届人民企业社会责任奖年度人物奖 2019-03-30
      • 驻最高检纪检组健全廉政档案 力求精准"画像" 2019-03-27
      • 游客被指捡石子砸老虎 北京野生动物园:正在核实 2019-03-27
      • 10月26日十九大新闻发言人专题新闻发布会 2019-03-22
      • 多交140分“亚裔税”?哈佛大学被控歧视亚裔学生 2019-03-22
      • 男子农田挖到古董抠出吓得魂飞魄散 2019-03-17
      • 瑞典南部城市发生枪击案致5人伤 警方:与恐袭无关 2019-03-10
      • 西安幼升小入学难问题出在哪儿教育部门将统筹协调安排 2019-03-10
      • 传统强队集体慢热(世界杯纵横) 2019-03-10
      • 乌鲁木齐水磨沟区开建两座立体停车库 2019-03-10
      • 山西新闻网特约摄影师名单&山西视觉志 2019-02-05