canvas（二）

漸變

線性漸變

var grd = cxt.createLinearGradien(x, y, x1, y1);
grd.addColorStop(位置, color)

徑向漸變

  • createRadiaGradient(x1, y1, r1, x2, y2, r2)
  • addColorStop()

把背景圖片作為填充

  • createPattern(imgDom, repeate)
  • 第二個參數 repeate/ repeat-x / repeat-y / no-repeat

變換

縮放

  • sacle(x, y)

位移

  • translate(x, y)

旋轉

  • rotate(angle)

環境的保存和恢復

  • save()
  • restore()

設置透明

  • globalAlpha = number 設置不透明度
  • 全局設置是對整個畫布（繪圖環境） 進行設置

限定繪圖區域

  • clip()

輸出base64編碼

  • canvas.toDataURL(type, encoder)
  • type為mime類型 image/jpeg image/gif image/png image/webp

畫布渲染畫布

把一個畫布以圖片的形式用 drawImage() 插入到另一個畫布
這是一種canvas的優化手段

設置線條

  • lineCap 屬性 設置線條兩端的形狀 butt/round/square
  • lineJoin 屬性 設置線條夾角 miter/bevel/round
  • miterLimit 屬性 設置夾角斜角的最大長度 一般默認 10
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容