謝哪吒的投稿

前言

html5Canvas的知識點，是開發(fā)的必備技能，在實際工作中也常常會涉及到。

最近熬夜總結html5Canvas相關的知識點，大家一起看一下吧：

1.html5Canvas基礎知識

• Canvas是什么？翻譯過來是畫布的意思
• Canvas元素用于在網頁上繪制2D圖形和圖像

Canvas使用的場景有：1，動畫；2，H5游戲；3，圖表。

效果動畫，加載Loading:

H5游戲效果：

對于Canvas需要掌握：

1. 使用Canvas畫直線，矩形，圓形以及設置它們的樣式。
2. Canvas中的圖形變換，漸變，文字和圖片。
3. Canvas的像素獲取，陰影和曲線繪制以及區(qū)域的剪輯。
4. Canvas動畫，交互和離屏技術。

Canvas坐標體系

• canvas默認大小，300*150
• 通過HTML，css，JavaScript設置width和height的區(qū)別
• HTML和JavaScript設置的畫布大小
• css設置的是畫布縮放后的大小
• 坐標系原點及方向（原點在左上角，向右為x方向，向下為y方向）

畫直線，矩形和原型

• 畫直線：ctx.moveTo(x1,y1)，ctx.lineTo(x2,y2)
• 畫圓形: ctx.arc(x,y,radius,0,Math.PI*2,true)
• 畫矩形：可以通過直線來畫，也可以直接用（ctx.strokeRect(x1,y1,x2,y2）

beginPath和closePath

1. beginPath和closePath并不是成對出現的
2. beginPath的作用是開始一條新路徑
3. closePath的作用是使當前路徑閉合

描邊和填充樣式

1. strokeStyle用來設置畫筆樣式，也就是直線，曲線，邊框的樣式
2. fillStyle用來設置 填充樣式
3. lineWidth用來設置線條的粗細

Canvas中的圖形變換，漸變，文字和圖片

1. Canvas中的圖像變換
2. Canvas中的漸變
3. Canvas中的文字
4. Canvas中的圖片

Canvas中的圖形變換

圖形變換都是針對坐標系來說的：

• 平移：ctx.translate(x,y)
• 旋轉：ctx.rotate(rad)
• 縮放：ctx.scale(x,y)

save和restore

用來保存和恢復上下文的環(huán)境ctx，一般成對出現

• ctx.save()，保存當前上下文環(huán)境。
• ctx.restore()，恢復到上一次的上下文環(huán)境

Canvas中的漸變

1. 線性漸變：ctx.createLinearGradient(xStart,yStart,xEnd,yEnd)

(xStart,yStart)是線段的起點，(xEnd,yEnd)是線段終點。起點到終點之間的顏色呈漸變。

2. gradient.addColorStop可以來控制漸變的顏色
3. 漸變可以理解為一種顏色
4. 徑向漸變：

ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);

(xStart,yStart)是第一個圓的原心，radiusStart是第一個圓的半徑，(xEnd,yEnd)是第二個圓的原心，radiusEnd是第二個圓的半徑

第一圓到第二個圓之間的顏色呈現漸變。

Canvas中的文字

描邊文字：ctx.strokeText(text,x,y)

填充文字：ctx.fillText(text,x,y);

設置字體樣式：ctx.font

• 例如：ctx.font="bold 100px sans-serif"
• 設置水平對齊方式：ctx.textAlign
• left,start，左對齊，center居中對齊，end,right，右對齊

設置垂直對齊方式：ctx.textBaseline

• top，頂對齊，middle，居中，bottom，底部對齊
• 計算文本寬度：ctx.measuerText(text).width 須在設置字體樣式之后計算

Canvas圖片

繪制圖片3種方法

• ctx.drawImage(image,x,y)，該方法把圖片繪制在(x,y)處
• ctx.drawImage(image,x,y,w,h)，該方法把圖片繪制在(x,y)處，并縮放為寬w,高h
• ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)，該方法把圖片中(sx,sy)處的寬sw，高sh的區(qū)域，繪制到(dx,dy)處，并縮放為寬dw，高dh

在image加載完成之后繪制：

示例：

var img = new Image();img.src = 'logo.png';img.onload = function() {    ctx.drawImage(img,0,0,40,40,0,0,80,80);}

Canvas繪制

• Canvas的圖形繪制和像素獲取
• Canvas陰影繪制
• Canvas剪輯區(qū)域
• Canvas曲線繪制

Canvas圖形畫刷

ctx.createPattern可以創(chuàng)建一個畫刷模式，進而可以設置到fillStyle里，進行畫刷的填充。

• 函數原型：ctx.createPattern(image,type)

type取值:

• no-repeat不平鋪
• repeat-x橫方向平
• repeat-y縱方向平鋪
• repeat全方向平鋪

Canvas像素操作

1. 獲取像素

var imageData = ctx.getImageData(x,y,w,h)返回的是一維數組：[r1,g1,b1,a1,r2,g2,b2,a2...]

2. 設置像素

ctx.putImageData(imageData,x,y)把imageData放在(x,y)處

3. 設置像素

ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)只顯示（dirtyX,dirtyY）處的寬dirtyW,dirtyH的區(qū)域

Canvas陰影繪制

1. ctx.shadowOffsetX:陰影x方向的偏移距離
2. ctx.shadowOffsetY:陰影y方向的偏移距離
3. ctx.shadowColor：陰影的顏色
4. ctx.shadowBlur：陰影的模糊半徑效果圖：

Canvas剪輯區(qū)域

1. 設置一個路徑；
2. 調用ctx.clip();
3. 再繪制圖形。

Canvas繪制曲線

狐線：

context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圓心(x,y)  半徑radius從starAngle到endAngleanticlockwise代表是否逆時針方向

生成工具

Canvas Quadratic Curve Example

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

二次樣條曲線：

context.quadraticCurveTo(qcpx,qcpy, qx,qy)

貝塞爾曲線：

context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)

• Canvas動畫，Canvas離屏技術

1. ctx.clearRect(x,y, width,height)

清除(x,y)點起， 寬width,高height的區(qū)域，用于重新繪制

離屏技術是什么：通過在離屏Canvas中繪制元素，再復制到顯示Canvas中，從而大幅提高性能的一種技術。

使用離屏技術：

• 靜態(tài)場景繪制特別耗資源，動態(tài)場景繪制簡單。為了不每次更新動態(tài)場景的時候，都去繪制靜態(tài)場景。
• 一般把靜態(tài)場景繪制在離屏canvas上，更新動態(tài)場景的時候，把靜態(tài)場景copy過來，而不是重新繪制。

離屏技術：

一個Canvas中的圖形繪制到另一個Canvas方法：

ctx.drawImage(canvas,x,y),該方法把canvas繪制在(x,y)處ctx.drawImage(canvas,x,y, w,h),該方法把canvas繪制在(x,y)處，并縮放為寬w,高hctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，該方法把canvas中（sx, sy）處的寬sw,高sh的區(qū)域，繪制到(dx,dy)處，并縮放為寬dw, 高dh

對canvas插件的相關了解

什么是Canvas插件，掌握Chart.js插件，了解Chartist.js和HighCharts.js插件

（圖表）Chart.js插件：https://www.chartjs.org/

Chartist.js插件是一個簡單的響應式圖表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）

HighCharts.js插件：方便快捷的HTML5交互性圖標庫：https://www.highcharts.com/

Chartist.js插件與HighCharts.js插件

• Chartist.js配置簡單，css和JavaScript分離，響應式圖表，支持不同的瀏覽器尺寸和分辨率。
• HighCharts.js，兼容當今所有的瀏覽器，包含iPhone，IE，火狐等。

響應式布局，它的用戶體驗友好，響應式網站可以根據不同終端，不同尺寸和不同應用環(huán)境，自動調整界面布局，展示內容，提供非常好的視覺效果。響應式布局就是一個網站能夠兼容多個終端

2. 構建Canvas元素

示例：

<style>#canva {    border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 繪制寬高200的canvas</div>

1. 使用JavaScript實現繪圖的流程

在開始繪圖時，先要獲取Canvas元素的對象，在獲取一個繪圖的上下文。

獲取Canvas對象 ,使用document對象的getElementById()方法獲取。

var canvas = document.getElementById("canvas")可以使用通過標簽名稱來獲取對象的getElementsByTagName方法

2. 創(chuàng)建二維的繪圖上下文對象

使用getContext()方法來獲取

var context  = canvas.getContext("2d")

3. 在Canvas上繪制文字

context.font="98px 黑體"; // 文字樣式context.fillStyle="red"; // 文字顏色context.textAlign = "center"; // 文字對齊方式// 繪制文字context.fillText("達達前端"，100, 123, 234);

繪制圖像：

使用drawImage()方法可以將圖像添加到Canvas畫布中，繪制一幅圖像，需要有三個重載的方法：

使用：

drawImage(image, x, y) // 在畫布上定位圖像// 方法在畫布上繪制圖像、畫布或視頻。// 方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。drawImage(image, x, y, width, height)// 在畫布上定位圖像，并規(guī)定圖像的寬度和高度drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切圖像，并在畫布上定位被剪切的部分

參數：

參數描述image規(guī)定要使用的圖像，畫布或視頻sourceX開始剪切的x坐標位置sourceY開始剪切的y坐標位置sourceWidth被剪切圖像的寬度sourceHeight被剪切圖像的高度destX在畫布上放置圖像的 x 坐標位置destY在畫布上放置圖像的 y 坐標位置destWidth要使用的圖像的寬度destHeight要使用的圖像的高度

插入圖像：

function Draw() {    // 獲取canvas對象    var canvas = document.getElementById("canvas");     // 獲取2d上下文繪圖對象    var context = canvas.getContext("2d");     // 使用Image()構造函數創(chuàng)建圖像對象    var newImg = new Image();     // 指定圖像的文件地址    newImg.src = "../images/dadaqianduan.jpg";     newImg.onload = function () {        // 左上角開始繪制圖像        context.drawImage(newImg, 0, 0);         context.drawImage(newImg, 250, 100, 150, 200);         context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120);    }}

在Canvas中繪制文字“達達前端”:

// canvas 寬高200<canvas id="canvas" width="200" height="200"></canvas><style type="text/css">canvas {    border: 2px solid #ccc;}</style><script>    // 獲取canvas    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 設置字體    context.font="98px 黑體";    // 填充    context.fillStyle="#036";    // 文本水平位置    context.textAlign="center";    // 執(zhí)行繪制    context.fillText("達達前端",100, 120, 200);</script>

3.繪制矩形

兩個方法：

1. strokeRect() - 矩形邊框
2. fillRect() - 填充矩形區(qū)域
3. strokeStyle - 設置線條的顏色
4. lineWidth - 設置線條寬度，默認寬度為1，單位是像素
5. fillStyle - 設置區(qū)域或文字的填充顏色

繪制矩形邊框，使用strokeStyle方法：

// 繪制矩形邊框strokeRect(x,y, width, height);

填充矩形區(qū)域，使用fillRect()方法：

// 填充矩形區(qū)域fillRect(x,y,width,height);

繪制矩形

// 繪制矩形function drawRect() {    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 描邊    context.strokeStyle = "#000";    // 線條寬度    context.lineWidth = 1;    // 矩形邊框    context.strokeRect(50,50, 150, 100);    // 填充    context.fillStyle="#f90";    // 矩形    context.fillRect(50,50,150,100);}window.addEventListener("load",DrawRect,true);

使用clearRect方法，可以擦除指定的矩形區(qū)域：

// 擦除指定的矩形區(qū)域context.clearRect(x,y,width,height)

4.體驗canvas繪圖

在實際開發(fā)中，畫布是默認300*150的大小。

示例：

// 為畫布設置邊框canvas {    border: 1px solid #ccc;}// 準備畫布，默認是300*150// 設置畫布的大小<canvas width="1200" height="800"></canvas>// 準備繪制工具<script>// 獲取元素var myCanvas = document.querySelector('canvas');// 獲取上下文，繪制工具箱var ctx = myCanvas.getContext('2d');// 移動畫筆ctx.moveTo(100,100);// 繪制直線，軌跡ctx.lineTo(200,100);// 描邊ctx.stroke()

創(chuàng)建Canvas元素

向 HTML5 頁面添加 canvas 元素

// 規(guī)定元素的 id、寬度和高度<canvas id="myCanvas" width="200" height="100"></canvas>

圖形繪制

需要理解些概念：

• 路徑的概念
• 路徑的繪制
• 描邊 stroke()
• 填充 fill()
• 閉合路徑
• 手動閉合
• 程序閉合 closePath()
• 開啟新的路徑 beginPath()

設置樣式

• 畫筆的狀態(tài)
• lineWidth 線寬，默認1px
• lineCap 線末端類型：(butt默認)、round、square
• lineJoin 相交線的拐點 miter(默認)、round、bevel
• strokeStyle 線的顏色
• fillStyle 填充顏色
• setLineDash() 設置虛線
• getLineDash() 獲取虛線寬度集合
• lineDashOffset 設置虛線偏移量（負值向右偏移）

矩形繪制

• rect(x,y,w,h) 沒有獨立路徑
• strokeRect(x,y,w,h) 有獨立路徑，不影響別的繪制
• fillRect(x,y,w,h) 有獨立路徑，不影響別的繪制
• clearRect(x,y,w,h) 擦除矩形區(qū)域

圓弧繪制

• 弧度概念
• arc()
• x 圓心橫坐標
• y 圓心縱坐標
• r 半徑
• startAngle 開始角度
• endAngle 結束角度
• anticlockwise 是否逆時針方向繪制（默認false表示順時針；true表示逆時針）

繪制文本

• ctx.font = '微軟雅黑' 設置字體
• strokeText()
• fillText(text,x,y,maxWidth)
• text 要繪制的文本
• x,y 文本繪制的坐標（文本左下角）
• maxWidth 設置文本最大寬度，可選參數
• ctx.textAlign 文本水平對齊方式，相對繪制坐標來說的
• left
• center
• right
• start 默認
• end
• ctx.direction 屬性css(rtl ltr) start和end于此相關
• 如果是ltr,start和left表現一致
• 如果是rtl,start和right表現一致
• ctx.textBaseline 設置基線（垂直對齊方式 ）
• top 文本的基線處于文本的正上方，并且有一段距離
• middle 文本的基線處于文本的正中間
• bottom 文本的基線處于文本的證下方，并且有一段距離
• hanging 文本的基線處于文本的正上方，并且和文本粘合
• alphabetic 默認值，基線處于文本的下方，并且穿過文字
• ideographic 和bottom相似，但是不一樣
• measureText() 獲取文本寬度obj.width

繪制圖片

• drawImage()
• img 圖片對象、canvas對象、video對象
• x,y,w,h 圖片中的一個矩形區(qū)域
• x1,y1,w1,h1 畫布中的一個矩形區(qū)域
• img 圖片對象、canvas對象、video對象
• x,y 圖片繪制的左上角
• w,h 圖片繪制尺寸設置(圖片縮放，不是截取)
• img 圖片對象、canvas對象、video對象
• x,y 圖片繪制的左上角
• 三個參數drawImage(img,x,y)
• 五個參數drawImage(img,x,y,w,h)
• 九個參數drawImage(img,x,y,w,h,x1,y1,w1,h1)

坐標變換

• 平移 移動畫布的原點
• translate(x,y) 參數表示移動目標點的坐標
• 縮放
• scale(x,y) 參數表示寬高的縮放比例
• 旋轉
• rotate(angle) 參數表示旋轉角度

5.使用路徑

1. lineTo()
2. rect()
3. arc()
4. fill()
5. stroke()

創(chuàng)建繪圖路徑

使用方法：beginPath()和closePath()，分別表示開始一個新的路徑和關閉當前的路徑

1. 使用beginPath()方法創(chuàng)建一個新的路徑
2. moveTo(x,y)，開始繪圖時的坐標
3. lineTo(x,y)，繪制直線到目標坐標
4. arc(x,y, radius, startAngle,endAngle, counterclockwise)

• x,y描述弧的圓形的圓心坐標
• radius圓形的半徑
• startAngle描述弧的開始點的角度
• endAngle描述弧的結束點的角度
• counterclockwise，true值，表示逆時針方向，否則反之

5. rect(x,y, width, height)：xy,起點坐標，矩形的寬高，繪制矩形路徑

closePath方法關閉當前路徑

繪制圖形樣式

1. stokeStyle 屬性設置矩形邊框的顏色
2. lineWidth 屬性設置邊框的寬度
3. fillStyle 屬性設置填充的顏色

繪制網格，網格大小

var grid = 10;// 畫多少條x軸方向的線，橫向的條數，畫布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 畫布寬高ctx.canvas.widthctx.canvas.height// 網格大小var gridSize = 10;var canvasHeight = ctx.canvas.height;var xLineTotal = canvasHeight / gridSize// 總線條var xLineTotal = Math.floor(canvasHeight / gridSize);for (var i=0; i<=xLineTotal; i++) {    ctx.beginPath();    ctx.moveTo(0, i*gridSize-0.5);    ctx.lineTo(canvasWidth, i*gridSize-0.5);    ctx.strokeStyle='#eee';    ctx.stroke();}// 畫多少條y軸方向的線var yLineTotal = canvasWidth / gridSizevar yLineTotal = Math.floor(canvasWidth / gridSize);for (var i=0; i <= yLineTotal; i++) {    ctx.beginPath();    ctx.moveTo(i*gridSize-0.5,0);    ctx.lineTo(i*gridSize-0.5,canvasHeight);    ctx.strokeStyle='#eee';    ctx.stroke();}

繪制坐標系，確定圓點，確定離畫布旁邊的距離，確定坐標軸的長度，確定箭頭的大小，繪制箭頭填充。

// 繪制坐標系var space = 20;var arrowSize = 10;// 畫布寬高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐標系var x0 = space;var y0 = canvasHeight - space;// 繪制x軸ctx.moveTo(x0,y0);ctx.lineTo(canvasWidth-space, y0);ctx.stroke();// 箭頭ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);ctx.lineTo(canvasWidth-space, y0);ctx.fill();ctx.stroke();// 繪制y軸ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);ctx.stroke();// 箭頭ctx.lineTo(space+space-arrowSize/2, space + arrowSize);ctx.lineTo(space-space-arrowSize/2, space - arrowSize);ctx.lineTo(space, space);ctx.fill();ctx.stroke();// 繪制點var coordinate = {    x: 146,    y: 356}// 點尺寸var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);ctx.closePath();ctx.fill();

arc方法和rect方法

arc創(chuàng)建一個圓形，rect創(chuàng)建一個矩形，最后調用stroke()方法和fill()方法

// 圓形context.arc(100,100,30,0,Math.PI*2,true);

使用beginPath()方法可以新創(chuàng)建一個子路徑，closePath()方法用來閉合路徑的。

繪制兩條直線

function DrawLine() {    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 創(chuàng)建繪制過程    context.beginPath();    context.moveTo(50,50);    context.lineTo(120,120);    context.lineTo(120,60);    context.closePath();    context.strokeStyle="#000";    // 執(zhí)行繪制    context.stroke();}

• beginPath() 方法開始一條路徑，或者重置當前的路徑
• closePath() 方法創(chuàng)建從當前點到開始點的路徑

如果不用beginPath()方法，繪制圖形時不再創(chuàng)建子路徑，第一次的圖形在執(zhí)行過程中會被繪制填充兩次。

圖形組合

屬性 globalCompositeOperation 設置如何在畫布上組合顏色

12中組合類型：

值說明copy只繪制新圖形，刪除其他所有內容darker在圖形重疊的地方，顏色由兩個顏色值相減后決定destination-atop已有的內容只在它和新的圖形重疊的地方保留，新圖形繪制在內容后destination-in在新圖形和已有畫布重疊的地方，已有內容都保留，所有其他內容成為透明destination-out在新圖形和已有內容不重疊的地方，已有內容保留所有其他內容成為透明destination-over新圖形繪制于已有內容的后面lighter在圖形重疊的地方，顏色由兩種顏色值的疊加值來決定source-atop只在新圖形和已有內容重疊的地方才繪制新圖形source-in在新圖形和已有內容重疊的地方，新圖形才會被繪制，所有其他內容成為透明source-out只在和已有圖形不重疊的地方繪制新圖形source-over新圖形繪制于已有圖形的頂部xor在重置和正常繪制的其他地方，圖形都成為透明

繪制曲線

// 圓形，曲線arc(x, y, radius, startAngle, endAngle, counterclockwise);

• x,y 表示弧的圓形的圓心坐標
• radius 表示弧的圓形的半徑
• startAngle 表示圓弧的開始點的角度
• endAngle 表示圓弧的結束點的角度
• counterclockwise 若true表示逆時針，false反之順時針

<style>// 畫布背景顏色#canvas {    background: #000;}</style>// 畫布寬度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 開始 context.beginPath(); // 繪制圓形 context.arc(100, 100, 50, 0, Math.PI*2, true); // 關閉 context.closePath(); // 填充顏色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>

如果使用css設置寬高，畫布會按照300*150的比例進行縮放，將300*150的頁面顯示在400*400的容器中。

// 設置畫布寬度var cx = canvas.width = 400;var cy = canvas.height = 400;

使用js動態(tài)設置寬高。

建議使用HTML中的width和height，或者js動態(tài)設置寬高

創(chuàng)建一個canvas標簽，第一步：

// 獲取這個canvas的上下文對象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');

方法：

• fill() 填充路徑
• stroke() 描邊
• arc() 創(chuàng)建圓弧
• rect() 創(chuàng)建矩形
• fillRect() 繪制矩形路徑區(qū)域
• strokeRect() 繪制矩形路徑描邊
• clearRect() 在給定的矩形內清除指定的像素
• beginPath() 起始一條路徑，或重置當前路徑
• moveTo() 把路徑移動到畫布中的指定點，不創(chuàng)建線條
• lineTo()添加一個新點，在畫布中創(chuàng)建從該點到最后指定點的線條
• clip() 從原始畫布剪切任意形狀和尺寸的區(qū)域
• arcTo() 創(chuàng)建兩切線之間的弧/曲線
• quadraticCurveTo() 創(chuàng)建二次方貝塞爾曲線
• bezierCurveTo() 創(chuàng)建三次方貝塞爾曲線
• isPointInPath() 如果指定的點位于當前路徑中，則返回 true，否則返回 false

輔助線繪制弧線：arcTo() 方法

語法：

// 輔助線繪制弧線arcTo(x1, y1, x2, y2, radius)

arcTo()方法繪制一條弧線

代碼：

// 繪制一條弧線function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    // 開始繪制    context.beginPath();    // 移動點    context.moveTo(80, 120);    // 繪制線條    context.lineTo(150, 60);    context.lineTo(180, 130);    // 描邊    context.strokeStyle="rgba(0,0,0,0.4)";    context.lineWidth=2;    context.stroke();    context.beginPath();    context.moveTo(80,120);    context.arcTo(150,60,180,130,50);    context.strolkeStyle="rgba(255,135,0,1)";    context.stroke();}

繪制二次樣條曲線

quadraticCurveTo()方法：

quadraticCurveTo(cpX, cpY, x, y);// cpX, cpY描述了控制點的坐標，x, y描述了曲線的終點坐標

繪制貝濟埃曲線

bezierCurveTo()方法：它是應用于二維圖形應用程序的數學曲線。

bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一個控制點的坐標 // cp2X, cp2Y 表示第二個控制點的坐標 // x, y表示曲線的終點坐標

繪制曲線：

function draw() {    // 繪制曲線    var canvas = document..getElementById('canvas');    var context = canvas.getContext('2d');    // 開始繪制    context.beginPath();    // 移動    context.moveTo(100,180);    // 連線    context.lineTo(110,80);    context.moveTo(260,100);    context.lineTo(300,200);    // 描邊    context.strokeStyle="rgba(0,0,0,0.4)";    // 設置寬度    context.lineWidth=3;    context.stroke();    context.beginPath();    context.moveTo(100,180);    // 繪制貝濟埃曲線    context.bezierCurveTo(110,80,260,100,300,200);    // 設置寬度    context.lineWidth = 3;    context.strokeStyle="rgba(255,135,0,1)";    context.stroke();}

四分之一圓

var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 畫布寬度200var canX = canvas.width = 200var canY = canvas.height = 200;// 開始繪制context.beginPath();// 四分之一圓context.arc(100, 100, 50, 0, Math.PI*0.5, false);context.strokeStyle="white"context.stroke();context.beginPath();context.lineTo(200, 200);context.lineTo(200, 100);context.lineTo(100,50);context.strokeStyle = '#fff';context.stroke();

• lineCap 設置或返回線條的結束斷點樣式
• lineJoin 設置或返回兩條線相交時，產生拐角類型
• lineWidth 設置或返回當前的線條寬度
• miterLimit 設置或返回最大斜接長度

1. fillRect() 繪制一個實心矩形
2. strokeRect() 繪制一個空心矩形

設置陰影，shadowBlur -context.shadowBlur = 20

• createLinearGradient() 創(chuàng)建線性漸變
• createPattern() 在指定的方向上重復指定的元素
• createRadialGradient() 創(chuàng)建放射狀/環(huán)形的漸變
• addColorStop() 規(guī)定漸變對象中的顏色和停止位置

gradient.addColorStop(stop,color)

1. scale() 縮放當前繪圖變大或變小
2. rotate() 旋轉當前繪圖
3. translate() 重新映射畫布的(0,0)位置

6.使用圖像

使用三種方法插入圖像

function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    // image實例    var newImg = new Image();    newImg.src='../images/dada.jpg' // 指定圖像的文件地址    newImg.onload = function(){        // 繪圖        context.drawImage(newImg, 0, 0);        context.drawImage(newImg, 250,100, 150,200);        context.drawImage(newImg, 90,80,100,100,0,0,120,120);    }}

在插入圖像之前，需要考慮圖像加載的時間，如果圖像沒加載完成就已經執(zhí)行drawImage()方法，就不會顯示任何圖片。

7.繪制漸變

提供了兩種漸變的創(chuàng)建的方法：

// 創(chuàng)建線性漸變createLinearGradient()方法// 創(chuàng)建徑向漸變createRadialGradient()方法

設置漸變顏色和過渡方式

語法如下：

1. offset是一個范圍在0.0到1.0之間的浮點值 表示漸變的開始點和結束點之間的一部分
2. offset的0為開始點，1為結束點

addColorStop(offset, color);

繪制線性漸變的矩形

function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 創(chuàng)建漸變對象，線性漸變    var grd = context.createLinearGradient(0,0,300,0)    // 設置漸變顏色    grd.addColorStop(0, '#xxx'); // 設置顏色    grd.addColorStop(1, '#xxx'); // 設置顏色    // 將填充樣式設置為線性漸變對象    context.fillStyle = grd;    context.fillRect(0,0,300,80);}

繪制徑向漸變的矩形

function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 徑向漸變    var grd = context.createRadialGradient(50,50,0,100,100,90);    // 設置漸變顏色以及方式    grd.addColorStop(0,'#xxx');    grd.addColorStop(1,'#xxx');    context.fillStyle = grd;    context.beginPath();    // 圓形    context.arc(100,100,90,0,Math.PI*2,true);    context.fill();}

描邊屬性

線帽屬性：lineCap，表示指定線條的末端如何繪制值：lineCap: butt, round, square，當線條具有一定的寬度才能表現出來。

butt// 定義了線段沒有線帽round// 定義了線段的末端為一個半圓形的線帽square// 定義了線段的末端為一個矩形的線帽

線條的連接屬性lineJoin，用于兩條線條到的連接方式：

miter兩條線段的外邊緣一直延伸到它們相交，屬性miterLimit是用來描述如何繪制兩條線段的交點，是表示延伸長度和線條長度的比值。

默認為10，只有miter使用時有效

lineJoin = [value];round // 兩條線段的外邊緣應該和一個填充的弧結合bevel // 兩條線段的外邊緣應該和一個填充的三角形相交

8.模式

語法如下：

createPattern(image, repetitionStyle)

1. repeat 表示圖像在各個方向上循環(huán)平鋪
2. repeat-x 表示圖像在橫向上循環(huán)平鋪
3. repeat-y 表示圖像在縱向上循環(huán)平鋪
4. no-repeat 表示圖像只使用一次

function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    var img = new Image();     // 使用Image()構造函數創(chuàng)建圖像對象    img.src='../images/xxx'     // 指定圖像的文件地址    img.onload = function() {        // 繪圖模式        var ptrn = context.createPattern(img, 'repeat');        // 填充樣式        context.fillStyle = ptrn;        // 填充矩形        context.fillReat(0,0,500,200);    }}

移動變化：

// 移動translate(dx,dy);// 繪制function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 設置移動偏移量    context.translate(200, 200);    // 繪制一個圓形    ArcFace(context);}// 繪制一個圓形function ArcFace(context) {    // 繪制一個圓形邊框    context.beginPath();    // 繪制圓形    context.arc(0,0,90,0,Math.PI*2,true);    // 線寬    context.lineWidth=5;    // 描邊    context.strokeStyle='#f90';    context.stroke();    // 繪制    context.beginPath();    context.moveTo(-30, -30);    context.lineTo(-30, -20);    context.moveTo(30, -30);    context.lineTo(30, -20);    context.moveTo(-20, 30);    // 曲線    context.bezierCurveTo(-20, 44, 20, 30, 30, 20);    context.strokeStyle='#000';    context.lineWidth=10;    context.lineCap = 'round';    // 笑臉    context.stroke();}

縮放變換，語法如下：

scale(sx, sy);// sx為水平方向上的縮放因子，sy為垂直方向上的縮放因子

// 示例function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContent('2d')    // 移動    context.translate(200,200);    // 縮放    context.scale(0.5,0.5);    ArcFace(context);}

旋轉變換：

rotate(angle)

// 旋轉例子function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d')    context.translate(200,200);    // 旋轉    context.rotate(Math.PI/6);    context.scale(0.5, 0.5)    ArcFace(context)}

矩形變形，語法如下：

transform(m1x,m1y,m2x,m2y,dx,dy); // 移動，縮放，旋轉1. 移動translate (dx, dy)2. 縮放scale (sx,sy)3. 旋轉rotate (A)

TML5不僅僅是HTML規(guī)范的當前最新版本，也代表了一系列Web相關技術的總稱，它把代碼重復率很高的功能提取為<header>、<nav>標簽等，它的核心理念是將一切新特性與原有功
能保持平滑過渡，HTML5的優(yōu)勢：

html5的優(yōu)勢
HTML5進化的重大意義還在于，它從技術層面帶來了8個類別的革新：

1.語義網(Semantics)：提供了一組豐富的語義化標簽。

2.離線&存儲(Ofline & Storage)：HTML5 App Cache、Local Storage、Indexed DB和File API使Web應用程序更加迅速，并提供了離線使用的能力。

3.設備訪問(Device Access)：增強了設備感知能力，使得Web應用在電腦、Pad、手機上均能使用。

4.通信(Connectivity)：增強了通信能力，意味著增強了聊天程序的實時性和網絡游戲的順暢性。

5.多媒體(Multimedia)：音頻視頻能力的增強是HTML5的最大突破。

6.圖形和特效(3D,Graphics & Effects)：Canvas、SVG和WebGL等功能使得圖形渲染更高效、頁面效果更加炫酷。

7.性能和集成(Performance &Integration)：Web Worker使瀏覽器可以多線程處理后臺任務而不阻塞用戶界面渲染。同時，性能檢測工具方便評估程序性能。

8.呈現(CSS3)：CSS3可以很高效地實現頁面特效，并不會影響頁面的語義和性能。

HTML5以“簡單至上，盡可能簡化”為原則做了改進，具體介紹如下：

1.簡化了DOCTYPE和字符集聲明。

2.強化了HTML5API，使頁面設計更加簡單。

3.以瀏覽器的原生能力代替復雜的JavaScript代碼。

4.精確定義的錯誤恢復機制，如果頁面中有錯誤，也不會影響整個頁面的顯示。

HTML5以“用戶至上”為宗旨，具體介紹如下：

1.在遇到沖突時，規(guī)范的優(yōu)先級為：用戶>頁面作者>實現者(瀏覽器)>規(guī)范開發(fā)者(W3C/WHATWG)>純理論。

2.HTML5還引入了一種新的安全模型來保證HTML5足夠安全。

3.各大覽器對HTML5的支持正在不斷完善，越來越多的開發(fā)者嘗試在項目中使用HTML5。