整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5可不是什么虛幻的概念，與其高談闊論的討論HTML5未來的趨勢和價(jià)值，不如一起研究一下現(xiàn)在的HTML5可以做出哪些成果，可以讓我們做出出色的產(chǎn)品。
Form Follows Function就是一個(gè)展示HTML5實(shí)現(xiàn)的網(wǎng)站，目前網(wǎng)站展示了14個(gè)作品，其中包括了交互操作以及視覺效果。這些效果本身并不是一個(gè)完整的產(chǎn)品，但是加入到產(chǎn)品中就能讓產(chǎn)品生色不少。
1、散景（Bokeh）
一種圖像的焦外效果，通過HTML5實(shí)現(xiàn)的這種效果可以加載在背景、字體浮現(xiàn)。
2、3D效果
3D西紅柿罐頭湯，可通過鼠標(biāo)進(jìn)行旋轉(zhuǎn)操作，同時(shí)底部有一個(gè)倒影效果，一個(gè)很優(yōu)秀的交互效果示范。
3、宇宙全景圖
設(shè)定整個(gè)宇宙的場景，可以用360度觀察整個(gè)宇宙星云，這種實(shí)現(xiàn)方式呈現(xiàn)出的效果更接近Google的街景地圖。
4、像素化效果
這種效果用于圖片很有趣，而實(shí)際可利用到的領(lǐng)域，還有待探索。
5、螺旋效果
字體的旋轉(zhuǎn)效果，簡單的近乎一張GIF圖片，不過通過對(duì)文章的替換，可以輕易的轉(zhuǎn)換成各種各樣的文案展示。
6、結(jié)晶化濾鏡
通過鼠標(biāo)可選擇結(jié)晶化的范圍，用于網(wǎng)頁可對(duì)界面直接做出更多的交互視覺效果。
7、色相混合
隨著鼠標(biāo)移動(dòng)而改變各個(gè)位置的色相，一種很簡單就能匯聚用戶視線的交互效果，不過在簡單的背景才更能體現(xiàn)這種效果的價(jià)值。
8、翻轉(zhuǎn)時(shí)鐘
一種時(shí)鐘的展示效果，結(jié)構(gòu)非常簡單，而看上去也很清晰明了，適合嵌入到很多不同的頁面中作為實(shí)時(shí)時(shí)間的展示。
9、水紋倒影
一種視覺效果，在這個(gè)Demo中可以調(diào)節(jié)倒影波動(dòng)的速度。這種效果適合制作Logo以及主頁的展示。
10、自由落體
“下雨的人”展示了一種自由落體的效果，可以用鼠標(biāo)條件調(diào)節(jié)飄落的角度，提供了一種帶有物理效果的交互操作。這種功能特別用于游戲。
11、水面波紋
同樣是一種物理效果，可通過鼠標(biāo)刺激水面波紋，在網(wǎng)頁上就能輕松實(shí)現(xiàn)。
12、樹的成長
一種應(yīng)激操作的交互方式，點(diǎn)擊一次長出一棵樹，可用于網(wǎng)頁展示的附加效果。這種效果在視覺上有多種用法，網(wǎng)頁、游戲都可以。
13、字母雨刷
在屏幕上掃除字母的雨刷效果，初次看見感覺像是網(wǎng)頁刷新的過度畫面。
14、漸顯效果
通過一些雜亂無章的線逐漸顯現(xiàn)出一幅畫，中間的顯現(xiàn)過程很適合作為網(wǎng)頁加載的等待界面。
原文鏈接：http://www.gbtags.com/gb/share/2595.htm
html5Canvas的知識(shí)點(diǎn)，是開發(fā)的必備技能，在實(shí)際工作中也常常會(huì)涉及到。
最近熬夜總結(jié)html5Canvas相關(guān)的知識(shí)點(diǎn)，大家一起看一下吧：
Canvas使用的場景有：1，動(dòng)畫；2，H5游戲；3，圖表。
效果動(dòng)畫，加載Loading:
H5游戲效果：
對(duì)于Canvas需要掌握：
Canvas坐標(biāo)體系
畫直線，矩形和原型
beginPath和closePath
描邊和填充樣式
Canvas中的圖形變換，漸變，文字和圖片
Canvas中的圖形變換
圖形變換都是針對(duì)坐標(biāo)系來說的：
save和restore
用來保存和恢復(fù)上下文的環(huán)境ctx，一般成對(duì)出現(xiàn)
Canvas中的漸變
(xStart,yStart)是線段的起點(diǎn)，(xEnd,yEnd)是線段終點(diǎn)。起點(diǎn)到終點(diǎn)之間的顏色呈漸變。
ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);
(xStart,yStart)是第一個(gè)圓的原心，radiusStart是第一個(gè)圓的半徑，(xEnd,yEnd)是第二個(gè)圓的原心，radiusEnd是第二個(gè)圓的半徑
第一圓到第二個(gè)圓之間的顏色呈現(xiàn)漸變。
Canvas中的文字
描邊文字：ctx.strokeText(text,x,y)
填充文字：ctx.fillText(text,x,y);
設(shè)置字體樣式：ctx.font
設(shè)置垂直對(duì)齊方式：ctx.textBaseline
Canvas圖片
繪制圖片3種方法
在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圖形畫刷
ctx.createPattern可以創(chuàng)建一個(gè)畫刷模式，進(jìn)而可以設(shè)置到fillStyle里，進(jìn)行畫刷的填充。
type取值:
Canvas像素操作
var imageData = ctx.getImageData(x,y,w,h)返回的是一維數(shù)組：[r1,g1,b1,a1,r2,g2,b2,a2...]ctx.putImageData(imageData,x,y)把imageData放在(x,y)處ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)只顯示（dirtyX,dirtyY）處的寬dirtyW,dirtyH的區(qū)域Canvas陰影繪制
Canvas剪輯區(qū)域
Canvas繪制曲線
狐線：
context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圓心(x,y) 半徑radius從starAngle到endAngleanticlockwise代表是否逆時(shí)針方向生成工具
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)清除(x,y)點(diǎn)起， 寬width,高h(yuǎn)eight的區(qū)域，用于重新繪制
離屏技術(shù)是什么：通過在離屏Canvas中繪制元素，再復(fù)制到顯示Canvas中，從而大幅提高性能的一種技術(shù)。
使用離屏技術(shù)：
離屏技術(shù)：
一個(gè)Canvas中的圖形繪制到另一個(gè)Canvas方法：
ctx.drawImage(canvas,x,y),該方法把canvas繪制在(x,y)處ctx.drawImage(canvas,x,y, w,h),該方法把canvas繪制在(x,y)處，并縮放為寬w,高h(yuǎn)ctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，該方法把canvas中（sx, sy）處的寬sw,高sh的區(qū)域，繪制到(dx,dy)處，并縮放為寬dw, 高dh對(duì)canvas插件的相關(guān)了解
什么是Canvas插件，掌握Chart.js插件，了解Chartist.js和HighCharts.js插件
（圖表）Chart.js插件：https://www.chartjs.org/
Chartist.js插件是一個(gè)簡單的響應(yīng)式圖表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）
HighCharts.js插件：方便快捷的HTML5交互性圖標(biāo)庫：https://www.highcharts.com/
Chartist.js插件與HighCharts.js插件
響應(yīng)式布局，它的用戶體驗(yàn)友好，響應(yīng)式網(wǎng)站可以根據(jù)不同終端，不同尺寸和不同應(yīng)用環(huán)境，自動(dòng)調(diào)整界面布局，展示內(nèi)容，提供非常好的視覺效果。響應(yīng)式布局就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端
示例：
<style>#canva { border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 繪制寬高200的canvas</div>在開始繪圖時(shí)，先要獲取Canvas元素的對(duì)象，在獲取一個(gè)繪圖的上下文。
獲取Canvas對(duì)象 ,使用document對(duì)象的getElementById()方法獲取。
var canvas = document.getElementById("canvas")可以使用通過標(biāo)簽名稱來獲取對(duì)象的getElementsByTagName方法使用getContext()方法來獲取
var context = canvas.getContext("2d")context.font="98px 黑體"; // 文字樣式context.fillStyle="red"; // 文字顏色context.textAlign = "center"; // 文字對(duì)齊方式// 繪制文字context.fillText("達(dá)達(dá)前端"，100, 123, 234);繪制圖像：
使用drawImage()方法可以將圖像添加到Canvas畫布中，繪制一幅圖像，需要有三個(gè)重載的方法：
使用：
drawImage(image, x, y) // 在畫布上定位圖像// 方法在畫布上繪制圖像、畫布或視頻。// 方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。drawImage(image, x, y, width, height)// 在畫布上定位圖像，并規(guī)定圖像的寬度和高度drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切圖像，并在畫布上定位被剪切的部分參數(shù)：
參數(shù)描述image規(guī)定要使用的圖像，畫布或視頻sourceX開始剪切的x坐標(biāo)位置sourceY開始剪切的y坐標(biāo)位置sourceWidth被剪切圖像的寬度sourceHeight被剪切圖像的高度destX在畫布上放置圖像的 x 坐標(biāo)位置destY在畫布上放置圖像的 y 坐標(biāo)位置destWidth要使用的圖像的寬度destHeight要使用的圖像的高度
插入圖像：
function Draw() { // 獲取canvas對(duì)象 var canvas = document.getElementById("canvas"); // 獲取2d上下文繪圖對(duì)象 var context = canvas.getContext("2d"); // 使用Image()構(gòu)造函數(shù)創(chuàng)建圖像對(duì)象 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中繪制文字“達(dá)達(dá)前端”:
// 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"); // 設(shè)置字體 context.font="98px 黑體"; // 填充 context.fillStyle="#036"; // 文本水平位置 context.textAlign="center"; // 執(zhí)行繪制 context.fillText("達(dá)達(dá)前端",100, 120, 200);</script>兩個(gè)方法：
繪制矩形邊框，使用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)在實(shí)際開發(fā)中，畫布是默認(rèn)300*150的大小。
示例：
// 為畫布設(shè)置邊框canvas { border: 1px solid #ccc;}// 準(zhǔn)備畫布，默認(rèn)是300*150// 設(shè)置畫布的大小<canvas width="1200" height="800"></canvas>// 準(zhǔn)備繪制工具<script>// 獲取元素var myCanvas = document.querySelector('canvas');// 獲取上下文，繪制工具箱var ctx = myCanvas.getContext('2d');// 移動(dòng)畫筆ctx.moveTo(100,100);// 繪制直線，軌跡ctx.lineTo(200,100);// 描邊ctx.stroke()向 HTML5 頁面添加 canvas 元素
// 規(guī)定元素的 id、寬度和高度<canvas id="myCanvas" width="200" height="100"></canvas>圖形繪制
需要理解些概念：
設(shè)置樣式
矩形繪制
圓弧繪制
繪制文本
繪制圖片
坐標(biāo)變換
創(chuàng)建繪圖路徑
使用方法：beginPath()和closePath()，分別表示開始一個(gè)新的路徑和關(guān)閉當(dāng)前的路徑
closePath方法關(guān)閉當(dāng)前路徑
繪制網(wǎng)格，網(wǎng)格大小
var grid = 10;// 畫多少條x軸方向的線，橫向的條數(shù)，畫布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 畫布寬高ctx.canvas.widthctx.canvas.height// 網(wǎng)格大小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();}繪制坐標(biāo)系，確定圓點(diǎn)，確定離畫布旁邊的距離，確定坐標(biāo)軸的長度，確定箭頭的大小，繪制箭頭填充。
// 繪制坐標(biāo)系var space = 20;var arrowSize = 10;// 畫布寬高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐標(biāo)系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();// 繪制點(diǎn)var coordinate = { x: 146, y: 356}// 點(diǎn)尺寸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)建一個(gè)圓形，rect創(chuàng)建一個(gè)矩形，最后調(diào)用stroke()方法和fill()方法
// 圓形context.arc(100,100,30,0,Math.PI*2,true);使用beginPath()方法可以新創(chuàng)建一個(gè)子路徑，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()方法，繪制圖形時(shí)不再創(chuàng)建子路徑，第一次的圖形在執(zhí)行過程中會(huì)被繪制填充兩次。
圖形組合
屬性 globalCompositeOperation 設(shè)置如何在畫布上組合顏色
12中組合類型：
值說明copy只繪制新圖形，刪除其他所有內(nèi)容darker在圖形重疊的地方，顏色由兩個(gè)顏色值相減后決定destination-atop已有的內(nèi)容只在它和新的圖形重疊的地方保留，新圖形繪制在內(nèi)容后destination-in在新圖形和已有畫布重疊的地方，已有內(nèi)容都保留，所有其他內(nèi)容成為透明destination-out在新圖形和已有內(nèi)容不重疊的地方，已有內(nèi)容保留所有其他內(nèi)容成為透明destination-over新圖形繪制于已有內(nèi)容的后面lighter在圖形重疊的地方，顏色由兩種顏色值的疊加值來決定source-atop只在新圖形和已有內(nèi)容重疊的地方才繪制新圖形source-in在新圖形和已有內(nèi)容重疊的地方，新圖形才會(huì)被繪制，所有其他內(nèi)容成為透明source-out只在和已有圖形不重疊的地方繪制新圖形source-over新圖形繪制于已有圖形的頂部xor在重置和正常繪制的其他地方，圖形都成為透明
繪制曲線
// 圓形，曲線arc(x, y, radius, startAngle, endAngle, counterclockwise);<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); // 關(guān)閉 context.closePath(); // 填充顏色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>如果使用css設(shè)置寬高，畫布會(huì)按照300*150的比例進(jìn)行縮放，將300*150的頁面顯示在400*400的容器中。
// 設(shè)置畫布寬度var cx = canvas.width = 400;var cy = canvas.height = 400;使用js動(dòng)態(tài)設(shè)置寬高。
建議使用HTML中的width和height，或者js動(dòng)態(tài)設(shè)置寬高
創(chuàng)建一個(gè)canvas標(biāo)簽，第一步：
// 獲取這個(gè)canvas的上下文對(duì)象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');方法：
輔助線繪制弧線：arcTo() 方法
語法：
// 輔助線繪制弧線arcTo(x1, y1, x2, y2, radius)arcTo()方法繪制一條弧線
代碼：
// 繪制一條弧線function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 開始繪制 context.beginPath(); // 移動(dòng)點(diǎn) 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描述了控制點(diǎn)的坐標(biāo)，x, y描述了曲線的終點(diǎn)坐標(biāo)bezierCurveTo()方法：它是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一個(gè)控制點(diǎn)的坐標(biāo) // cp2X, cp2Y 表示第二個(gè)控制點(diǎn)的坐標(biāo) // x, y表示曲線的終點(diǎn)坐標(biāo)繪制曲線：
function draw() { // 繪制曲線 var canvas = document..getElementById('canvas'); var context = canvas.getContext('2d'); // 開始繪制 context.beginPath(); // 移動(dòng) context.moveTo(100,180); // 連線 context.lineTo(110,80); context.moveTo(260,100); context.lineTo(300,200); // 描邊 context.strokeStyle="rgba(0,0,0,0.4)"; // 設(shè)置寬度 context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(100,180); // 繪制貝濟(jì)埃曲線 context.bezierCurveTo(110,80,260,100,300,200); // 設(shè)置寬度 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();設(shè)置陰影，shadowBlur -context.shadowBlur = 20
gradient.addColorStop(stop,color)使用三種方法插入圖像
function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // image實(shí)例 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); }}在插入圖像之前，需要考慮圖像加載的時(shí)間，如果圖像沒加載完成就已經(jīng)執(zhí)行drawImage()方法，就不會(huì)顯示任何圖片。
提供了兩種漸變的創(chuàng)建的方法：
// 創(chuàng)建線性漸變createLinearGradient()方法// 創(chuàng)建徑向漸變createRadialGradient()方法設(shè)置漸變顏色和過渡方式
語法如下：
addColorStop(offset, color);function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 創(chuàng)建漸變對(duì)象，線性漸變 var grd = context.createLinearGradient(0,0,300,0) // 設(shè)置漸變顏色 grd.addColorStop(0, '#xxx'); // 設(shè)置顏色 grd.addColorStop(1, '#xxx'); // 設(shè)置顏色 // 將填充樣式設(shè)置為線性漸變對(duì)象 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); // 設(shè)置漸變顏色以及方式 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，當(dāng)線條具有一定的寬度才能表現(xiàn)出來。
butt// 定義了線段沒有線帽round// 定義了線段的末端為一個(gè)半圓形的線帽square// 定義了線段的末端為一個(gè)矩形的線帽線條的連接屬性lineJoin，用于兩條線條到的連接方式：
miter兩條線段的外邊緣一直延伸到它們相交，屬性miterLimit是用來描述如何繪制兩條線段的交點(diǎn)，是表示延伸長度和線條長度的比值。
默認(rèn)為10，只有miter使用時(shí)有效
lineJoin = [value];round // 兩條線段的外邊緣應(yīng)該和一個(gè)填充的弧結(jié)合bevel // 兩條線段的外邊緣應(yīng)該和一個(gè)填充的三角形相交語法如下：
createPattern(image, repetitionStyle)function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var img = new Image(); // 使用Image()構(gòu)造函數(shù)創(chuàng)建圖像對(duì)象 img.src='../images/xxx' // 指定圖像的文件地址 img.onload = function() { // 繪圖模式 var ptrn = context.createPattern(img, 'repeat'); // 填充樣式 context.fillStyle = ptrn; // 填充矩形 context.fillReat(0,0,500,200); }}移動(dòng)變化：
// 移動(dòng)translate(dx,dy);// 繪制function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 設(shè)置移動(dòng)偏移量 context.translate(200, 200); // 繪制一個(gè)圓形 ArcFace(context);}// 繪制一個(gè)圓形function ArcFace(context) { // 繪制一個(gè)圓形邊框 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') // 移動(dòng) context.translate(200,200); // 縮放 context.scale(0.5,0.5); ArcFace(context);}旋轉(zhuǎn)變換：
rotate(angle)// 旋轉(zhuǎn)例子function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d') context.translate(200,200); // 旋轉(zhuǎn) context.rotate(Math.PI/6); context.scale(0.5, 0.5) ArcFace(context)}矩形變形，語法如下：
transform(m1x,m1y,m2x,m2y,dx,dy); // 移動(dòng)，縮放，旋轉(zhuǎn)1. 移動(dòng)translate (dx, dy)2. 縮放scale (sx,sy)3. 旋轉(zhuǎn)rotate (A)TML5不僅僅是HTML規(guī)范的當(dāng)前最新版本，也代表了一系列Web相關(guān)技術(shù)的總稱，它把代碼重復(fù)率很高的功能提取為<header>、<nav>標(biāo)簽等，它的核心理念是將一切新特性與原有功
能保持平滑過渡，HTML5的優(yōu)勢：
html5的優(yōu)勢
HTML5進(jìn)化的重大意義還在于，它從技術(shù)層面帶來了8個(gè)類別的革新：
1.語義網(wǎng)(Semantics)：提供了一組豐富的語義化標(biāo)簽。
2.離線&存儲(chǔ)(Ofline & Storage)：HTML5 App Cache、Local Storage、Indexed DB和File API使Web應(yīng)用程序更加迅速，并提供了離線使用的能力。
3.設(shè)備訪問(Device Access)：增強(qiáng)了設(shè)備感知能力，使得Web應(yīng)用在電腦、Pad、手機(jī)上均能使用。
4.通信(Connectivity)：增強(qiáng)了通信能力，意味著增強(qiáng)了聊天程序的實(shí)時(shí)性和網(wǎng)絡(luò)游戲的順暢性。
5.多媒體(Multimedia)：音頻視頻能力的增強(qiáng)是HTML5的最大突破。
6.圖形和特效(3D,Graphics & Effects)：Canvas、SVG和WebGL等功能使得圖形渲染更高效、頁面效果更加炫酷。
7.性能和集成(Performance &Integration)：Web Worker使瀏覽器可以多線程處理后臺(tái)任務(wù)而不阻塞用戶界面渲染。同時(shí)，性能檢測工具方便評(píng)估程序性能。
8.呈現(xiàn)(CSS3)：CSS3可以很高效地實(shí)現(xiàn)頁面特效，并不會(huì)影響頁面的語義和性能。
HTML5以“簡單至上，盡可能簡化”為原則做了改進(jìn)，具體介紹如下：
1.簡化了DOCTYPE和字符集聲明。
2.強(qiáng)化了HTML5API，使頁面設(shè)計(jì)更加簡單。
3.以瀏覽器的原生能力代替復(fù)雜的JavaScript代碼。
4.精確定義的錯(cuò)誤恢復(fù)機(jī)制，如果頁面中有錯(cuò)誤，也不會(huì)影響整個(gè)頁面的顯示。
HTML5以“用戶至上”為宗旨，具體介紹如下：
1.在遇到?jīng)_突時(shí)，規(guī)范的優(yōu)先級(jí)為：用戶>頁面作者>實(shí)現(xiàn)者(瀏覽器)>規(guī)范開發(fā)者(W3C/WHATWG)>純理論。
2.HTML5還引入了一種新的安全模型來保證HTML5足夠安全。
3.各大覽器對(duì)HTML5的支持正在不斷完善，越來越多的開發(fā)者嘗試在項(xiàng)目中使用HTML5。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
