玩轉「Canvas」

摘要： Canvas是 HTML5 新增的，一個可以使用指令碼(通常為JavaScript)在其中繪製圖像的 HTML 元素。它可以用來製作照片集或者製作簡單(也不是那麼簡單)的動畫，甚至可以進行實時視訊處理和渲染。 Canvas是由HTML程式碼配合高度和寬度屬性而定義出的可繪製區域。JavaScr...

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

Line"/>

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~1color:該位置下的顏色
複製程式碼

透明度

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

文字

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

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

font = valueeg:"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()

區別詳見： ofollow,noindex">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>
複製程式碼