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

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， 也可微信搜索小程序「美菜產品技術團隊」，乾貨滿滿且每週更新，想學習技術的你不要錯過哦。