作者： 糖少

簡介

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標籤的使用

2. canvas方法檢查支援性

3. canvas 繪製圖形

座標系

矩形

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)以及半徑繪製弧線 同時連線兩個控制點
複製程式碼

貝塞爾曲線

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

二次貝塞爾曲線

三次貝塞爾曲線

二次貝塞爾曲線

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）線條末端樣式   依次是方形、圓形&突出、方形&突出
複製程式碼

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

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) 切片前四個是定義影象源的切片位置和大小   後四個是定期切片的目標顯示位置大小
複製程式碼

狀態儲存 恢復

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

source-in

source-out

source-atop

destination-over

destination-in

destination-out

destination-atop

xor

copy

裁剪

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)

• viewBox 屬性

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

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

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

矩形 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等標籤的使用不再詳細的講解

• 詳情：www.runoob.com/svg/svg-tex…

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

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

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

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

canvas & svg 效能

相關連結：

• blog.csdn.net/u012468376/…
• www.w3cplus.com/canvas/grad…
• www.runoob.com/svg/svg-tut…

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