canvas複習總結(一)

guoliangli發表於2018-02-10

最近一段時間一直在做echarts繪圖方面的東西,對canvas非常感興趣,但是原生的介面也忘得差不多了,在此總結整理下。

width and height

canvas的width和height屬性是畫布實際寬度和高度,我們在這個上面繪製的圖形。如果沒有設定,預設為width:300px,height:150px。而canvas的style的width和height是canvas在瀏覽器中被渲染的高度和寬度。

高分屏下變模糊的處理

canvas是點陣圖,所以無法縮放保持不變形。在如mac上,瀏覽器就會以2個畫素點的寬度來渲染一個畫素,canvas在Retina螢幕下相當於佔據了2倍的空間,因此變得模糊。因此,要做Retina屏適配,關鍵是知道當前canvas的實際渲染倍率,然後將canvas放大到該倍率來繪製,最後將canvas壓縮成一倍的物理大小來展示。canvas中的線條大小、文字大小等都需要乘以該倍率來進行繪製。

  • 實際渲染倍率的計算
ratio = window.devicePixelRatio / (context.backingStoreRatio || 1);
複製程式碼
  • 縮放canvas
canvas.style.width = canvas.width + 'px';  

canvas.style.height = canvas.height + 'px';

canvas.width = canvas.width * ratio;  

canvas.height = canvas.height * ratio;
複製程式碼

注意style上一定要加單位,不然你會看到驚喜。

渲染上下文

getContext('2d')
getContext('webgl')
//目前瀏覽器未實現
getContext('webgl2')
複製程式碼

柵格 and 座標空間

柵格的起點為左上角(座標為(0,0))

座標空間

矩形

x與y指定了在canvas畫布上所繪製的矩形的左上角(相對於原點)的座標。width和height設定矩形的尺寸。

  • fillRect
  • strokeRect
  • clearRect
  • rect (屬於路徑範疇)
fillRect(x, y, width, height)
繪製一個填充的矩形

strokeRect(x, y, width, height)
繪製一個矩形的邊框

clearRect(x, y, width, height)
清除指定矩形區域,讓清除部分完全透明

rect(x, y, width, height)
將一個矩形路徑增加到當前路徑上,執行後moveTo()方法自動設定座標引數為(0,0)
複製程式碼

rect與其他不同的是rect是路徑,二其他的都可以直接在canvas上繪製出來。

路徑

  • beginPath
  • closePath
beginPath()
新建一條路徑,生成之後,圖形繪製命令被指向到路徑上生成路徑。
closePath()
閉合路徑之後圖形繪製命令又重新指向到上下文中。
這個方法會通過繪製一條從當前點到開始點的直線來閉合圖形。
複製程式碼

當我們在呼叫fill時會自動閉合路徑,stroke不會閉合。

canvas複習總結(一) canvas複習總結(一)

第二張圖片中,繪製圓形前沒有使用beginpath的函式,因此stroke時會連起來。

移動筆觸

  • moveTo(x,y) 移動當前畫筆位置

  • lineTo(x,y)

圓弧

  • arc(x, y, radius, startAngle, endAngle, anticlockwise)

畫一個以(x,y)為圓心的以radius為半徑的圓弧(圓),從startAngle開始到endAngle結束,按照anticlockwise給定的方向(預設為順時針)來生成。Angle單位是弧度。

二次貝塞爾曲線及三次貝塞爾曲線

quadraticCurveTo(cp1x, cp1y, x, y)
繪製二次貝塞爾曲線,cp1x,cp1y為一個控制點,x,y為結束點。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪製三次貝塞爾曲線,cp1x,cp1y為控制點一,cp2x,cp2y為控制點二,x,y為結束點。
複製程式碼

圖片描述
紅色點為控制點,藍色為起始點和終點。

相關文章