。現在我們需要加另外一種畫筆效果，帶透明度的螢光筆。那可能會覺得繪製畫筆的時候加上透明度就可以了。我們來在原來**上設定
ctx.globalalpha屬性為0.3，或者將strokestyle設定為rgba的形式如rgba(55,55,55,0.3)，**如下：
view code
我們滑鼠畫線出來的效果如下，可以看到有很多重疊區域：
對canvas有所了解的同學，知道
linejoin和
linecap的話可能會嘗試改變這兩個屬性，實現之後也有同樣重疊的效果。
為什麼會有這種重疊渲染顏色的問題呢？細細品味**，你會發現是因為每次move的時候繪製的部分是上個滑鼠點和當前滑鼠點之前的連線，這樣就會導致頭部和尾部有重疊部分多次被stroke了。（不同連線設定的頭部尾部重疊不同）
為了避免出現上述重疊這種問題下面介紹兩種方法。
現在我們需要用上另外乙個api方法
globalcompositeoperation，具體介紹可以看我另外一篇博文講的比較詳細（canvas學習：globalcompositeoperation詳解
123如果透明度設定成0.8，畫出的線條如下：41617
181971
7273
如果透明度設定成0.2，畫出的線條如下：
另有一種普遍做法是使用陣列points儲存每個點的座標值，每次繪製前先清除畫布內容，再迴圈points陣列繪製路徑，最後進行一次stroke。
這種方法每次只能保留一條線條，因為在不斷的清除畫布內容，如果需要保留住的話，可以擴充套件下points為二維陣列，保留每一條線條的所有滑鼠點。清除畫布後遍歷points陣列重繪所有線條。
123這兩種方法都可以實現螢光筆的效果，如下截圖：41617
181976
7778
第一種方法只繪製上個點和當前點，而第二種需要繪製所有線條，所以從流暢性上對比第一種有優勢。但如果需要實現橡皮擦線擦除的功能第一種就滿足不了了，我的一篇博文中具體介紹了橡皮擦點擦除和線擦除的實現可以參看，具體採用哪種繪製螢光筆點的方法需要根據功能需求來定！
canvas小畫板 （1）平滑曲線
專案需求 需要實現乙個可以自由書寫的小畫板 對於熟悉canvas的同學來說，這個需求很簡單，大致邏輯如下 1 監聽事件pointerdown，pointermove，pointerup 2 標記是否拖拽畫線模式變數 isdrawing，在down事件時置為true，up的時候置為false 3 使用...
canvas簡易畫板
window.getcomputedstyle 是乙個可以獲取當前元素所有最終使用的css屬性值。返回的是乙個css樣式宣告物件 object cssstyledeclaration 唯讀，而element.style能讀能寫。語法如下 var style window.getcomputedsty...
canvas簡易畫板
閒著無事，也學習一下html5，也要跟進時代嘛，否則就落伍了。這裡是乙個簡易的畫板，目前還沒有實現滑鼠移動時候的軌跡，只是捕獲滑鼠點下的座標作為起點，和滑鼠彈起的座標作為終點。畫圓形的時候滑鼠點下為原點的位置，滑鼠彈起的座標計算半徑。當中發現乙個問題，矩形邊框沒有實現，目前是用兩個矩形實現的邊框效果...