熬夜總結(jié)了“HTML5畫(huà)布”的知識(shí)點(diǎn)（共10條）

謝哪吒的投稿

前言

html5Canvas的知識(shí)點(diǎn)，是開(kāi)發(fā)的必備技能，在實(shí)際工作中也常常會(huì)涉及到。

最近熬夜總結(jié)html5Canvas相關(guān)的知識(shí)點(diǎn)，大家一起看一下吧：

1.html5Canvas基礎(chǔ)知識(shí)

Canvas是什么？翻譯過(guò)來(lái)是畫(huà)布的意思
Canvas元素用于在網(wǎng)頁(yè)上繪制2D圖形和圖像

Canvas使用的場(chǎng)景有：1，動(dòng)畫(huà)；2，H5游戲；3，圖表。

效果動(dòng)畫(huà)，加載Loading:

H5游戲效果：

對(duì)于Canvas需要掌握：

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

Canvas坐標(biāo)體系

canvas默認(rèn)大小，300*150
通過(guò)HTML，css，JavaScript設(shè)置width和height的區(qū)別
HTML和JavaScript設(shè)置的畫(huà)布大小
css設(shè)置的是畫(huà)布縮放后的大小
坐標(biāo)系原點(diǎn)及方向（原點(diǎn)在左上角，向右為x方向，向下為y方向）

畫(huà)直線，矩形和原型

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

beginPath和closePath

beginPath和closePath并不是成對(duì)出現(xiàn)的
beginPath的作用是開(kāi)始一條新路徑
closePath的作用是使當(dāng)前路徑閉合

描邊和填充樣式

strokeStyle用來(lái)設(shè)置畫(huà)筆樣式，也就是直線，曲線，邊框的樣式
fillStyle用來(lái)設(shè)置填充樣式
lineWidth用來(lái)設(shè)置線條的粗細(xì)

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

Canvas中的圖像變換
Canvas中的漸變
Canvas中的文字
Canvas中的圖片

Canvas中的圖形變換

圖形變換都是針對(duì)坐標(biāo)系來(lái)說(shuō)的：

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

save和restore

用來(lái)保存和恢復(fù)上下文的環(huán)境ctx，一般成對(duì)出現(xiàn)

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

Canvas中的漸變

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

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

gradient.addColorStop可以來(lái)控制漸變的顏色
漸變可以理解為一種顏色
徑向漸變：

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

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

設(shè)置垂直對(duì)齊方式：ctx.textBaseline

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

Canvas圖片

繪制圖片3種方法

ctx.drawImage(image,x,y)，該方法把圖片繪制在(x,y)處
ctx.drawImage(image,x,y,w,h)，該方法把圖片繪制在(x,y)處，并縮放為寬w,高h(yuǎn)
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圖形畫(huà)刷

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

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

type取值:

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

Canvas像素操作

獲取像素

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

設(shè)置像素

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

設(shè)置像素

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

Canvas陰影繪制

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

Canvas剪輯區(qū)域

設(shè)置一個(gè)路徑；
調(diào)用ctx.clip();
再繪制圖形。

Canvas繪制曲線

狐線：

context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圓心(x,y)  半徑radius從starAngle到endAngleanticlockwise代表是否逆時(shí)針?lè)较?/code>

生成工具

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動(dòng)畫(huà)，Canvas離屏技術(shù)

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

清除(x,y)點(diǎn)起，寬width,高h(yuǎn)eight的區(qū)域，用于重新繪制

離屏技術(shù)是什么：通過(guò)在離屏Canvas中繪制元素，再?gòu)?fù)制到顯示Canvas中，從而大幅提高性能的一種技術(shù)。

使用離屏技術(shù)：

靜態(tài)場(chǎng)景繪制特別耗資源，動(dòng)態(tài)場(chǎng)景繪制簡(jiǎn)單。為了不每次更新動(dòng)態(tài)場(chǎng)景的時(shí)候，都去繪制靜態(tài)場(chǎng)景。
一般把靜態(tài)場(chǎng)景繪制在離屏canvas上，更新動(dòng)態(tài)場(chǎng)景的時(shí)候，把靜態(tài)場(chǎng)景copy過(guò)來(lái)，而不是重新繪制。

離屏技術(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è)簡(jiǎn)單的響應(yīng)式圖表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）

HighCharts.js插件：方便快捷的HTML5交互性圖標(biāo)庫(kù)：https://www.highcharts.com/

Chartist.js插件與HighCharts.js插件

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

響應(yīng)式布局，它的用戶體驗(yàn)友好，響應(yīng)式網(wǎng)站可以根據(jù)不同終端，不同尺寸和不同應(yīng)用環(huán)境，自動(dòng)調(diào)整界面布局，展示內(nèi)容，提供非常好的視覺(jué)效果。響應(yīng)式布局就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端

`2. 構(gòu)建Canvas元素`

示例：

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

使用JavaScript實(shí)現(xiàn)繪圖的流程

在開(kāi)始繪圖時(shí)，先要獲取Canvas元素的對(duì)象，在獲取一個(gè)繪圖的上下文。

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

var canvas = document.getElementById("canvas")可以使用通過(guò)標(biāo)簽名稱來(lái)獲取對(duì)象的getElementsByTagName方法

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

使用getContext()方法來(lái)獲取

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

在Canvas上繪制文字

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

繪制圖像：

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

使用：

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

參數(shù)：

參數(shù)描述image規(guī)定要使用的圖像，畫(huà)布或視頻sourceX開(kāi)始剪切的x坐標(biāo)位置sourceY開(kāi)始剪切的y坐標(biāo)位置sourceWidth被剪切圖像的寬度sourceHeight被剪切圖像的高度destX在畫(huà)布上放置圖像的 x 坐標(biāo)位置destY在畫(huà)布上放置圖像的 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 () {        // 左上角開(kāi)始繪制圖像        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>

`3.繪制矩形`

兩個(gè)方法：

strokeRect() - 矩形邊框
fillRect() - 填充矩形區(qū)域
strokeStyle - 設(shè)置線條的顏色
lineWidth - 設(shè)置線條寬度，默認(rèn)寬度為1，單位是像素
fillStyle - 設(shè)置區(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.體驗(yàn)canvas繪圖`

在實(shí)際開(kāi)發(fā)中，畫(huà)布是默認(rèn)300*150的大小。

示例：

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

`創(chuàng)建Canvas元素`

向 HTML5 頁(yè)面添加 canvas 元素

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

圖形繪制

需要理解些概念：

路徑的概念
路徑的繪制

描邊 stroke()
填充 fill()

閉合路徑

手動(dòng)閉合
程序閉合 closePath()

開(kāi)啟新的路徑 beginPath()

設(shè)置樣式

畫(huà)筆的狀態(tài)

lineWidth 線寬，默認(rèn)1px
lineCap 線末端類型：(butt默認(rèn))、round、square
lineJoin 相交線的拐點(diǎn) miter(默認(rèn))、round、bevel
strokeStyle 線的顏色
fillStyle 填充顏色
setLineDash() 設(shè)置虛線
getLineDash() 獲取虛線寬度集合
lineDashOffset 設(shè)置虛線偏移量（負(fù)值向右偏移）

矩形繪制

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

圓弧繪制

弧度概念
arc()

x 圓心橫坐標(biāo)
y 圓心縱坐標(biāo)
r 半徑
startAngle 開(kāi)始角度
endAngle 結(jié)束角度
anticlockwise 是否逆時(shí)針?lè)较蚶L制（默認(rèn)false表示順時(shí)針；true表示逆時(shí)針）

繪制文本

ctx.font = '微軟雅黑' 設(shè)置字體
strokeText()
fillText(text,x,y,maxWidth)

text 要繪制的文本
x,y 文本繪制的坐標(biāo)（文本左下角）
maxWidth 設(shè)置文本最大寬度，可選參數(shù)

ctx.textAlign 文本水平對(duì)齊方式，相對(duì)繪制坐標(biāo)來(lái)說(shuō)的

left
center
right
start 默認(rèn)
end

ctx.direction 屬性css(rtl ltr) start和end于此相關(guān)

如果是ltr,start和left表現(xiàn)一致
如果是rtl,start和right表現(xiàn)一致

ctx.textBaseline 設(shè)置基線（垂直對(duì)齊方式）

top 文本的基線處于文本的正上方，并且有一段距離
middle 文本的基線處于文本的正中間
bottom 文本的基線處于文本的證下方，并且有一段距離
hanging 文本的基線處于文本的正上方，并且和文本粘合
alphabetic 默認(rèn)值，基線處于文本的下方，并且穿過(guò)文字
ideographic 和bottom相似，但是不一樣

measureText() 獲取文本寬度obj.width

繪制圖片

drawImage()

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

坐標(biāo)變換

平移移動(dòng)畫(huà)布的原點(diǎn)

translate(x,y) 參數(shù)表示移動(dòng)目標(biāo)點(diǎn)的坐標(biāo)

縮放

scale(x,y) 參數(shù)表示寬高的縮放比例

旋轉(zhuǎn)

rotate(angle) 參數(shù)表示旋轉(zhuǎn)角度

`5.使用路徑`

lineTo()
rect()
arc()
fill()
stroke()

創(chuàng)建繪圖路徑

使用方法：beginPath()和closePath()，分別表示開(kāi)始一個(gè)新的路徑和關(guān)閉當(dāng)前的路徑

使用beginPath()方法創(chuàng)建一個(gè)新的路徑
moveTo(x,y)，開(kāi)始繪圖時(shí)的坐標(biāo)
lineTo(x,y)，繪制直線到目標(biāo)坐標(biāo)
arc(x,y, radius, startAngle,endAngle, counterclockwise)

x,y描述弧的圓形的圓心坐標(biāo)
radius圓形的半徑
startAngle描述弧的開(kāi)始點(diǎn)的角度
endAngle描述弧的結(jié)束點(diǎn)的角度
counterclockwise，true值，表示逆時(shí)針?lè)较颍駝t反之

rect(x,y, width, height)：xy,起點(diǎn)坐標(biāo)，矩形的寬高，繪制矩形路徑

closePath方法關(guān)閉當(dāng)前路徑

`繪制圖形樣式`

stokeStyle 屬性設(shè)置矩形邊框的顏色
lineWidth 屬性設(shè)置邊框的寬度
fillStyle 屬性設(shè)置填充的顏色

繪制網(wǎng)格，網(wǎng)格大小

var grid = 10;// 畫(huà)多少條x軸方向的線，橫向的條數(shù)，畫(huà)布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 畫(huà)布寬高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();}// 畫(huà)多少條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)，確定離畫(huà)布旁邊的距離，確定坐標(biāo)軸的長(zhǎng)度，確定箭頭的大小，繪制箭頭填充。

// 繪制坐標(biāo)系var space = 20;var arrowSize = 10;// 畫(huà)布寬高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()方法用來(lái)閉合路徑的。

繪制兩條直線

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

beginPath() 方法開(kāi)始一條路徑，或者重置當(dāng)前的路徑
closePath() 方法創(chuàng)建從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑

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

圖形組合

屬性 globalCompositeOperation 設(shè)置如何在畫(huà)布上組合顏色

12中組合類型：

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

繪制曲線

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

x,y 表示弧的圓形的圓心坐標(biāo)
radius 表示弧的圓形的半徑
startAngle 表示圓弧的開(kāi)始點(diǎn)的角度
endAngle 表示圓弧的結(jié)束點(diǎn)的角度
counterclockwise 若true表示逆時(shí)針，false反之順時(shí)針

<style>// 畫(huà)布背景顏色#canvas {    background: #000;}</style>// 畫(huà)布寬度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 開(kāi)始 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à)布會(huì)按照300*150的比例進(jìn)行縮放，將300*150的頁(yè)面顯示在400*400的容器中。

// 設(shè)置畫(huà)布寬度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');

方法：

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

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

語(yǔ)法：

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

arcTo()方法繪制一條弧線

代碼：

// 繪制一條弧線function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    // 開(kāi)始繪制    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)

`繪制貝濟(jì)埃曲線`

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');    // 開(kāi)始繪制    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');// 畫(huà)布寬度200var canX = canvas.width = 200var canY = canvas.height = 200;// 開(kāi)始繪制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 設(shè)置或返回線條的結(jié)束斷點(diǎn)樣式
lineJoin 設(shè)置或返回兩條線相交時(shí)，產(chǎn)生拐角類型
lineWidth 設(shè)置或返回當(dāng)前的線條寬度
miterLimit 設(shè)置或返回最大斜接長(zhǎng)度

fillRect() 繪制一個(gè)實(shí)心矩形
strokeRect() 繪制一個(gè)空心矩形

設(shè)置陰影，shadowBlur -context.shadowBlur = 20

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

gradient.addColorStop(stop,color)

scale() 縮放當(dāng)前繪圖變大或變小
rotate() 旋轉(zhuǎn)當(dāng)前繪圖
translate() 重新映射畫(huà)布的(0,0)位置

`6.使用圖像`

使用三種方法插入圖像

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í)間，如果圖像沒(méi)加載完成就已經(jīng)執(zhí)行drawImage()方法，就不會(huì)顯示任何圖片。

`7.繪制漸變`

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

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

設(shè)置漸變顏色和過(guò)渡方式

語(yǔ)法如下：

offset是一個(gè)范圍在0.0到1.0之間的浮點(diǎn)值表示漸變的開(kāi)始點(diǎn)和結(jié)束點(diǎn)之間的一部分
offset的0為開(kāi)始點(diǎn)，1為結(jié)束點(diǎn)

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)出來(lái)。

butt// 定義了線段沒(méi)有線帽round// 定義了線段的末端為一個(gè)半圓形的線帽square// 定義了線段的末端為一個(gè)矩形的線帽

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

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

默認(rèn)為10，只有miter使用時(shí)有效

lineJoin = [value];round // 兩條線段的外邊緣應(yīng)該和一個(gè)填充的弧結(jié)合bevel // 兩條線段的外邊緣應(yīng)該和一個(gè)填充的三角形相交

`8.模式`

語(yǔ)法如下：

createPattern(image, repetitionStyle)

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

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();}

縮放變換，語(yǔ)法如下：

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)}

矩形變形，語(yǔ)法如下：

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提供了一種全新的畫(huà)布功能，即通過(guò)Canvas來(lái)讓用戶在網(wǎng)頁(yè)中繪制圖形、文字、圖片等。Canvas表示畫(huà)布，現(xiàn)實(shí)生活中的畫(huà)布是用來(lái)作畫(huà)的，HTML5中的Canvas與之類似，我們可以稱它為“網(wǎng)頁(yè)中的畫(huà)布”。默認(rèn)情況下，Canvas是一塊300px乘50px的矩形畫(huà)布，用戶可以自定義畫(huà)布的大小或?yàn)楫?huà)布添加其他屬性。

Canvas并不是通過(guò)鼠標(biāo)繪畫(huà)的，用戶需要通過(guò)JavaScript來(lái)控制畫(huà)布中的內(nèi)容，例如添加圖片、線條、文字等。本節(jié)將講解如何使用Canvas繪制添加畫(huà)布和繪制線條。

使用HTML5中的<canvas>標(biāo)簽在網(wǎng)頁(yè)中創(chuàng)建一個(gè)畫(huà)布，語(yǔ)法格式如下：

<canvas id="cavsElem" width="400" height="300">
  您的瀏覽器不支持Canvas
</canvas>

上述代碼定義了一個(gè)id為cavsElem的畫(huà)布，并設(shè)置了畫(huà)布的寬度為400 px，高度為300px。

為了在畫(huà)布中繪制圖形，首先要通過(guò)JavaScript的getElementByld()方法獲取網(wǎng)頁(yè)中的畫(huà)布對(duì)象，代碼如下：

var canvas=document.getElementById('cavsElem');

在上述代碼中，參數(shù)“2d”代表畫(huà)筆的種類，這里表示二維繪圖的畫(huà)筆。如果想要繪制三維圖，可以把參數(shù)替換為“webgl”，三維操作目前還沒(méi)有廣泛應(yīng)用，了解即可。

2d代表一個(gè)平面，繪制圖形時(shí)需要在平面上確定起始點(diǎn)，也就是“從哪里開(kāi)始畫(huà)”，這個(gè)點(diǎn)需要通坐標(biāo)來(lái)控制。Canvas的坐標(biāo)軸從左上角“0，0”開(kāi)始。x軸向右增大，y軸向下增大，如圖所示。

繪制線條

線是所有復(fù)雜圖形的組成基礎(chǔ)，想要繪制復(fù)雜的圖形，首先要從繪制線開(kāi)始。在繪制線之前首先要了解線的組成。一條最單的線由三部分組成，分別為初始位置、連線端點(diǎn)以及描邊，線的組成如圖所示。

在繪制圖形時(shí)，首先需要確定從哪里下“筆”，這個(gè)下“筆”的位置就是初始位置。在畫(huà)布中使用moveTo(x,y)方法來(lái)定義初始位置，其中x和y表示水平坐標(biāo)軸和垂直坐標(biāo)軸的位置，中間用“，”隔開(kāi)。x和y的取值為數(shù)字，表示像素值(單位省略)。設(shè)置初始位置的示例代碼如下：

var context=canvas.getContext('2d');
context.moveTo(x,y);

在畫(huà)布中使用line To(x,y)方法來(lái)定義連線端點(diǎn)。和初始位置類似，連線端點(diǎn)也需要定義x和y的坐標(biāo)位置。定義連線端點(diǎn)的代碼如下：

context.lineTo(x,y);

通過(guò)初始位置和連線端點(diǎn)可以繪制一條線，但這條線并不能被看到。這時(shí)我們需要為線添加描邊，讓線變得可見(jiàn)。使用畫(huà)布中的stroke0方法，可以實(shí)現(xiàn)線的可視效果。為線添加描邊的代碼如下：

context.stroke();

了解了繪制線的方法后，下面演示如何實(shí)現(xiàn)在畫(huà)布中通過(guò)線條繪制字母M。

創(chuàng)建C:\codelchapter02demo12.html,首先創(chuàng)建畫(huà)布，然后繪制出字母M。具體代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>繪制字母M</title>
</head>
<body>
    <canvas id="cas" width="300" height="300">
        您的瀏覽器不支持Canvas
</canvas>
<script>
    var context=document.getElementById('cas').getContext('2d');
    context.moveTo(10,100);            //定義初始位置
    context.lineTo(30,10);             //定義連線端點(diǎn)
    context.lineTo(50,100);            //定義連線端點(diǎn)
    context.lineTo(70,10);             //定義連線端點(diǎn)
    context.lineTo(90,100);            //定義連線端點(diǎn)
    context.stroke();                  //描邊
</script>
</body>
</html>

上述代碼中，第8~10行代碼創(chuàng)建了一個(gè)寬300px高300px的畫(huà)布：第13~18行代碼通過(guò)定義初始位置、定義連線端點(diǎn)和描邊繪制了字母M。

(2)保存代碼，在瀏覽器中訪問(wèn)demol2.html，頁(yè)面效果如圖所示。

繪制字母M

圖中顯示了繪制的字母M，說(shuō)明成功通過(guò)Canvas完成了線條的繪制。

tml 5 互聯(lián)網(wǎng)的計(jì)算機(jī)瀏覽器

canvas結(jié)構(gòu)：

<canvas id="canvas"></canvas>

如果不給canvas指定大小，canvas默認(rèn)是300px寬，150px高。是行內(nèi)元素。通常使用width或者h(yuǎn)eight屬性指定其大小，不要使用CSS給canvas指定其大小。

繪圖主要在context：

canvas.getContext('2d')

畫(huà)直線：

context.moveTo(x,y);
context.lineTo(x+500,y+200);
context.stroke()

案例：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>

canvas 是基于狀態(tài)繪制的，即先定義狀態(tài)，后繪制。

起始一條路徑和結(jié)束（回到起點(diǎn)）路徑

ctx.beginPath();
ctx.closePath(); //會(huì)自動(dòng)將不封閉的圖形加上連線

矩形：

context.rect(x,y,width,height);

畫(huà)圓和弧：

圓心：arc(100,75,50,0*Math.PI,1.5*Math.PI,False)
半徑：arc(100,75,50,0,1.5*Math.PI,False)
開(kāi)始角：arc(100,75,50,0,1.5*Math.PI,False)
結(jié)束角：arc(100,75,50,0,1.5*Math.PI,False)
方向：默認(rèn)False為順時(shí)針，True為逆時(shí)針。

更多特殊設(shè)置，請(qǐng)參閱：http://www.w3school.com.cn/tags/html_ref_canvas.asp

制作動(dòng)畫(huà)的架構(gòu)：


         在線咨詢 
         上一篇：自學(xué)HTML教程，一級(jí)至六級(jí)標(biāo)題標(biāo)簽 

          下一篇：干貨：HTML中“input”背景提示文字美化


      
        
          您的項(xiàng)目需求
          
   
    
    
    
    
    
    
    
    
  

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
 
  
		推薦閱讀
		 		
					2016年終總結(jié)中：凝聚365天的AP...
						HTML中行級(jí)標(biāo)簽和塊級(jí)標(biāo)簽的轉(zhuǎn)化
						3個(gè)步驟為網(wǎng)站添加響應(yīng)式
						超簡(jiǎn)單！快速把網(wǎng)站生成 EXE ...
						HTML5代碼做的中國(guó)象棋游戲，這...
						2019年前端面試題總結(jié)：某公司...
						HTML文本格式化基礎(chǔ)教程1
						js如何實(shí)現(xiàn)動(dòng)態(tài)倒計(jì)時(shí)效果
						Htmx走紅，從React“退回去”后...
						新手如何搭建個(gè)人網(wǎng)站
						社交媒體環(huán)境中人們對(duì)媒介的依賴
						JavaScript嵌入HTML中的3種方式
						javascript實(shí)現(xiàn)左右點(diǎn)擊滑動(dòng)輪播
						什么是網(wǎng)絡(luò)托管？
						電腦圖標(biāo)拖動(dòng)就復(fù)制怎么弄 弱...
						JavaScript (HTML5) 圖表控件...
						這里有一份HTML的超全教程，自...
						嵌入式視覺(jué)系統(tǒng)接口—MIPI CSI-2
						2021年自考上半年科目安排匯總
						日常生活活動(dòng)能力評(píng)定

整合營(yíng)銷服務(wù)商

熬夜總結(jié)了“HTML5畫(huà)布”的知識(shí)點(diǎn)（共10條）

謝哪吒的投稿

前言

1.html5Canvas基礎(chǔ)知識(shí)

2. 構(gòu)建Canvas元素

3.繪制矩形

4.體驗(yàn)canvas繪圖

創(chuàng)建Canvas元素

5.使用路徑

繪制圖形樣式

繪制二次樣條曲線

繪制貝濟(jì)埃曲線

四分之一圓

6.使用圖像

7.繪制漸變

繪制線性漸變的矩形

繪制徑向漸變的矩形

描邊屬性

8.模式

您的項(xiàng)目需求