站長資訊網
        最全最豐富的資訊網站

        使用canvas設計出一個簡易的畫板

        前面講了一部分的canvasAPI的基礎知識,光看API的介紹確實是很無趣乏味,需要一點可以激發內心的激情的東西來激勵自己來學習,于是就了伴隨canvasAPI學習的小實例,這樣通過API的知識,結合小實例的應用,就可以更好的去理解canvas的這些屬性和方法,也可以激發自己創造canvas特效的靈感和感覺,恩恩,請叫我雷鋒,不謝!

        下面給大家帶來的這里小實例很簡單,是一個簡易的繪圖工具,先看看效果吧!

        使用canvas設計出一個簡易的畫板

        效果先描述一下哈:這里有一個canvas畫布和幾個按鈕,canvas畫布是一個畫板,可以畫任何的圖形,按鈕可以設置畫板的畫筆顏色,也可以清除畫板,當然,你要是畫出一副曠世奇畫,請點擊右鍵將圖片另存為,你懂的!

        那這個是怎么做的呢?

        我先說原理在貼代碼,方便大家理解,我都這樣了,就不要直接拿來主義了哈!

        原理其實很簡單,這里用到的核心的方法是lineTo()和stroke(),看過前面的API文章的同學應該明白是什么意思,就是劃線嘛

        當在畫布中,如果按下鼠標,我們將畫布的起始點放在此時鼠標的位置,用到的是moveTo(),然后鼠標移動的時候,用lineTo()畫路徑,用stroke()來填充路徑,移一下畫一下,這樣就能畫出曲線來,當鼠標抬起的時候,我們只需要取消鼠標的動作即可,如果你看過我寫的鼠標拖拽效果,是不是感覺很像啊,對的,思路跟拖拽是差不多的,只是具體的內容不一樣而已,如果你沒看過鼠標的拖拽效果,可以看這里 鼠標拖拽

        下面的按鈕因為各自控制的東西不一樣,我用了一個switch方法來給各自添加效果,設置顏色用到的canvas屬性是strokeStyle,清除畫布的方法在API里面沒有講到,可能是講漏了,這里說一下吧,這里是用的clearRect()方法,還是說一下吧:

        clearRect(x,y,w,h) 在給定的矩形內清除指定的像素

        參數:x,y 表示要清除的矩形的左上角的坐標, w,h 表示要清除的矩形的寬高

        看到這參數,我們可以了解到,它可以清除局部的畫布的內容,也可以清除整個畫布的內容,看你給多大的區域了,本實例是清除的整個畫布,因為我們需要整個畫布都清除掉,如果你只想清除你不想要的那塊,可以設置一個精確的區域,我就不在這里啰嗦了!

        大致的原理就這么簡單,我把代碼貼出來供大家參考理解,順便把效果地址貼出來體驗一下,廢話不多說了,看代碼:

        css:

        *{ padding:0; margin:0;}body{ background:#ccc;}canvas{ background:#fff; margin:50px 10px; }input{ display:inline-block; width:80px; height:30px; cursor:pointer; margin-left:10px;}

        html:

         <canvas width="500" height="500" id="canvas">          <span>親,您的瀏覽器不支持canvas,換個瀏覽器試試吧!</span>      </canvas>      <p>          <input type="button" value="紅畫筆" id="red">          <input type="button" value="綠畫筆" id="green">          <input type="button" value="藍畫筆" id="blue">          <input type="button" value="重置顏色" id="default">          <input type="button" value="清除畫布" id="clear">      </p>

        js:

        window.onload = function(){        var canvas = document.getElementById("canvas");        var ctx = canvas.getContext("2d");        var oInput = document.getElementsByTagName("input");        for(var i=0;i<oInput.length;i++){              oInput[i].onclick = function(){                var ID = this.getAttribute('id');                switch(ID){                    case 'red':                          ctx.strokeStyle = 'red';                        break;                    case 'green':                          ctx.strokeStyle = 'green';                        break;                    case 'blue':                          ctx.strokeStyle = 'blue';                        break;                    case 'default':                          ctx.strokeStyle = 'black';                        break;                    case 'clear':                          ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);                        break;                      }                  }              }          draw();        function draw(){              canvas.onmousedown = function(ev){                var ev = ev || event;                  ctx.beginPath();                  ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);                  document.onmousemove = function(ev){                    var ev = ev || event;                      ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop);                      ctx.stroke();                      }                  document.onmouseup = function(ev){                      document.onmousemove = document.onmouseup = null;                      ctx.closePath();                  }                                }          }                                    }

        哦,這里的一個細節忘記交代了,就是必須在繪圖部分加上路徑閉合,即beginPath()和closePath(),為什么?因為在每次鼠標抬起之后,切換下面的樣式或者清除畫布的時候,如果路徑不閉合的話,那么后面的操作會污染前面所畫的東西,比如前面用紅畫的,現在我切換到綠色,現在畫的和原來畫的都變成綠了,比如清除畫布,畫過一次之后清除,然后再畫的時候第一次畫的東西又出來了,這都不是我們想要的,所以此點需謹記!

        效果演示請看這里:

        canvas畫板小實例

        以后慢慢會帶來更多的小實例供大家參考,寫的不是很好,萬望不要嫌棄,也希望大家多多的關注我,這才是我最大的動力了,哈哈!

        大致就是這樣,謝謝大家!

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲av无码乱码国产精品| 人妻少妇精品无码专区二区| 四虎国产精品免费久久| 99热精品在线| 亚洲精品成a人在线观看| 国产精品免费久久久久影院| 国产午夜精品视频| 亚洲精品无码久久久久AV麻豆| 成人国内精品久久久久影院VR| 大伊香蕉精品一区视频在线| 亚洲精品成人片在线观看精品字幕 | 精品福利一区二区三区免费视频| 久久se精品一区精品二区国产| 国产精品亚洲片在线va| 精品国产精品国产偷麻豆| 亚洲精品无码Av人在线观看国产| 国精品产露脸自拍| 国产亚洲色婷婷久久99精品91| 四虎精品影院永久在线播放| 97久久精品无码一区二区天美 | 国产精品无码久久综合| 在线精品亚洲一区二区三区| 久久这里有精品视频| 精品无码人妻一区二区三区不卡 | 精品国产综合成人亚洲区| 国产麻豆精品久久一二三| 亚洲永久永久永久永久永久精品| 日韩精品无码免费一区二区三区| 欧美国产成人精品一区二区三区 | 四虎精品免费永久免费视频| 精品精品国产理论在线观看| 国产精品 猎奇 另类视频| 国产精品热久久无码av| 国产精品va久久久久久久| 国产精品V亚洲精品V日韩精品| 87国产私拍福利精品视频| 99久久精品国产一区二区| 国产精品伊人久久伊人电影| 国产精品美女久久久久AV福利 | 99热在线日韩精品免费| 国产成人精品男人的天堂538|