玩轉「Canvas」

WirelessSprucetec發表於2018-11-26
Canvas

作者： 糖少

簡介

Canvas是 HTML5 新增的，一個可以使用指令碼(通常為JavaScript)在其中繪製影像的 HTML 元素。它可以用來製作照片集或者製作簡單(也不是那麼簡單)的動畫，甚至可以進行實時視訊處理和渲染。 Canvas是由HTML程式碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript程式碼可以訪問該區域，類似於其他通用的二維API，通過一套完整的繪圖函式來動態生成圖形。 ​ Mozilla 程式從 Gecko 1.8 (Firefox 1.5)開始支援Canvas, Internet Explorer 從IE9開始支援。Chrome和Opera 9+ 也支援。

歷史來源

蘋果內部使用自己MacOS X WebKit推出，供應用程式使用像儀表盤的構件和 Safari 瀏覽器使用。 後來，有人通過Gecko核心的瀏覽器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文字網路應用技術工作組建議為下一代的網路技術使用該元素

canvas基本使用

  1. canvas標籤的使用

canvas1

  1. canvas方法檢查支援性

canvas2

  1. canvas 繪製圖形

canvas3

座標系

矩形

fillRect( x , y , width , height)  //填充以(x,y)為起點寬高分別為width、height的矩形 預設為黑色

stokeRect( x , y , width , height) //繪製一個空心以(x,y)為起點寬高分別為width、height的矩形

clearRect( x, y , width , height ) // 清除以(x,y)為起點寬高分別為width、height的矩形 為透明 
複製程式碼

路徑

beginPath() 新建一條路徑一旦建立成功 繪製命令將轉移到新建的路徑上

moveTo( x, y ) 移動畫筆到(x , y) 點開始後面的繪製工作

closePath() 關閉該路徑 將繪製指令重新轉移到上下文

stroke() 將繪製的路徑進行描邊

fill() 將繪製的封閉區域進行填充
複製程式碼

圓弧

arc( x , y , r , startAngle , endAngle ,  anticlosewise ) // 以(x,y)為圓心 r為半徑的圓  繪製startAngle弧度 到endAngle弧度的圓弧 anticlosewise預設為false 即順時針方向 true為逆時針方向

arcTo( x1 , y1 , x2 , y2 , radius ) //根據 兩個控制點 (x1,y1) 和 (x2, y2)以及半徑繪製弧線 同時連線兩個控制點
複製程式碼

canvas4

貝塞爾曲線

​一次貝塞爾曲線其實是一條直線

canvas5

二次貝塞爾曲線

canvas6

三次貝塞爾曲線

canvas7

二次貝塞爾曲線

quadraticCurveTo( cp1x, cp1y , x ,y )   // (cp1x,cp1y) 控制點    (x,y)結束點
複製程式碼

三次貝塞爾曲線

bezierCurveTo( cp1x, cp1y ,cp2x , cp2y ,x , y )//（cp1x,cp1y）控制點1   (cp2x,cp2y) 控制點2  (x,y)結束點
複製程式碼

樣式新增

fillStyle = color

strokeStyle = color 

//color 可以為顏色值、漸變物件(並非樣式！！！！)


lineWidth  = value  線寬

lineCap = type （butt 、 round 、square）線條末端樣式   依次是方形、圓形&突出、方形&突出
複製程式碼

canvas8

lineJoin = type （round 、bevel 、 miter）線條交匯處樣式 依次是圓形、平角 、 三角形
複製程式碼

canvas9


ctx.setLineDash([ 實際長度 , 間隙長度 ]) //虛線 setLineDash接受陣列

ctx.lineDashOffet  //設定偏移量
複製程式碼

漸變

var gradient = ctx.createLinearGradient( x1 ,y1 ,x2 ,y2); //線性漸變

var gradient = ctx.createRadialGradient(x1 ,y1 ,r1 ,x2 ,y2 ,r2);//徑向漸變

gradient.addColorStop( position , color )// position:相對位置0~1    color:該位置下的顏色
複製程式碼

透明度

ctx.globalAlpha = value (0~1)
複製程式碼

文字

fillText( text , x , y , [,maxWidth]) 在(x,y)位置繪製text文字  最大寬度為maxWidth(可選)

strokeText( text ,x ,y ,[,maxWidth]) 在(x,y)位置繪製text文字邊框  最大寬度為maxWidth(可選)

font = value               eg:"100px sans-serif"  
複製程式碼

繪製圖片

drawImage( image , x , y , width , height ) image為圖片物件、從(x,y)處放置寬高分別為width height的圖片

drawImage( image , sx , sy , swidth , sheight ,dx ,dy ,dwidth ,dheight) 切片前四個是定義影像源的切片位置和大小   後四個是定期切片的目標顯示位置大小
複製程式碼

canvas10

狀態儲存 恢復

save()

restore()
複製程式碼

動作

translate( x , y ) 將canvas原點的移動到 (x,y)     （save&restore儲存初始狀態！！！）

rotate( angle ) 順時針方向旋轉座標軸 angle弧度

scale(x,y) 將圖形橫向縮放x倍、縱向縮放y倍   （ x、y大於1是放大  小於1為縮放！！！）
複製程式碼

全域性合成操作

globalCompositeOperation = type; source-over

canvas11

source-in

canvas12

source-out

canvas13

source-atop

canvas14

destination-over

canvas15

destination-in

canvas16

destination-out

canvas17

destination-atop

canvas18

xor

canvas19

copy

canvas20

裁剪

clip //只顯示裁剪區域內部區域  (使用save & restore 儲存canvas狀態！！！)
複製程式碼

動畫

clearRect() 清空畫布

save&restore 儲存恢復canvas狀態
複製程式碼

定時執行

  • setInterval()
  • setTimeout()
  • requestAnimationFrame()

區別詳見：www.cnblogs.com/xiaohuochai…

svg

標籤

  • 矩形 rect
  • 圓形 circle
  • 橢圓 ellipse
  • 線 line
  • 折線 polyline
  • 多邊形 polygon
  • 路徑 path
  • 文字 text

詳細標籤 ： www.runoob.com/svg/svg-ref…

屬性

  • 寬度 width
  • 高度 height
  • css樣式 style
  • 填充色 fill
  • 邊框顏色 stroke
  • 邊框寬度 stroke-width
  • 邊框首尾 stroke-linecap
  • 線條樣式 stroke-dasharray (需要填寫線條寬度以及線條間隙 依據順序填寫一個迴圈)
  • 線條每一段的起始偏移量 stroke-dashoffet
  • 填充透明度 fill-opacity
  • 邊框 stroke-opacity
  • 圖形填充規則 fill-rule （nonzero evenodd）
  • 動作 transform （中心點為影像左上角,並且只支援2d變換

詳情：www.zhangxinxu.com/wordpress/2…

  • translate(10 ,10 ) or translate(10 10)
  • rotate(20) or rotate(20 , x y) x,y為旋轉中心點 並且只能是預設deg單位
  • scale(x , y)

canvas21

  • viewBox 屬性

詳情：www.zhangxinxu.com/wordpress/2…

  • viewBox = "x , y , width , height"
  • preserveAspectRatio屬性

詳情：www.zhangxinxu.com/wordpress/2…

canvas22

canvas23

矩形 rect

  • 距離左側位置 x
  • 距離頂部位置 y
  • 矩形產生圓角 rx
  • 矩形產生圓角 ry

圓形 circle

  • 圓點 cx cy
  • 半徑 r

橢圓 ellipse

  • 橢圓中心座標 cx cy
  • 水平半徑 rx
  • 垂直半徑 ry

直線 line

  • 開始點 x1 y1
  • 結束點 x2 y2

多邊形 polygon

  • 定義多邊形每個角的x y 座標 points (eg:points="200,10 250,190 160,210")

曲線 polyline

  • 定義折線起點 拐點 重點 points( eg: points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" )

路徑path

  • M = moveto 移動畫筆
  • L = lineto 畫線
  • H = horizontal lineto 水平線
  • V = vertical lineto 垂直線
  • C = curveto 曲線
  • S = smooth curveto 光滑曲線
  • Q = quadratic Bezier curve 貝塞爾曲線
  • T = smooth quadratic Bezier curveto 光滑貝塞爾曲線
  • A = elliptical Arc 橢圓
  • Z = closepath 結束路徑

注意 ： 上面的命令大寫表示絕對定位，小寫表示相對定位

  • 文字
<svg><text x="10" y="20" fill="red" transform="rotate(30,20,40)"></text></svg>
複製程式碼

其他超連結、tspan textPath等標籤的使用不再詳細的講解

這裡會發現svg標籤多並且path路徑等又很難計算等 推薦使用svg編輯器來生成路徑 這裡我們以Method Draw編輯器為例

使用教程網址：blog.csdn.net/q1056843325…

英文線上工具網址：editor.method.ac/

中文線上網址：c.runoob.com/more/svgedi…

canvas & svg 效能

canvas24

相關連結：

原文連結： tech.meicai.cn/detail/69， 也可微信搜尋小程式「美菜產品技術團隊」，乾貨滿滿且每週更新，想學習技術的你不要錯過哦。

相關文章