HTML5畫布canvas-教學(xué)講解課件

HTML5畫布canvas1PPT課件HTML5畫布canvas1PPT課件目錄畫布canvas介紹Canvas繪圖預(yù)備知識(shí)：canvas標(biāo)簽，Context，顏色，坐標(biāo)Canvas繪制基本圖形：矩形，圓形，直線，曲線Canvas中的漸變色：線性漸變，徑向漸變2PPT課件目錄畫布canvas介紹2PPT課件一、畫布canvas介紹Canvas應(yīng)用3PPT課件一、畫布canvas介紹Canvas應(yīng)用3PPT課件一、畫布canvas介紹<canvas></canvas>網(wǎng)頁中繪制圖形的容器，畫布。也可以用css控制canvas的大小，但是不會(huì)更改里面的坐標(biāo)數(shù)值。canvas元素本身是沒有繪圖能力的，所有的繪制工作必須用JavaScript完成。4PPT課件一、畫布canvas介紹<canvas></canvas>三、Canvas繪圖預(yù)備知識(shí)Canvas是畫布，Context則相當(dāng)于畫筆。目前只支持“2d”，未來會(huì)有“3d”5PPT課件三、Canvas繪圖預(yù)備知識(shí)Canvas是畫布，Conte三、Canvas繪圖預(yù)備知識(shí)Canvas圖形，一般來說分為填充、線條兩部分。開始畫之前，一般都要設(shè)置好填充和線條的樣式。6PPT課件三、Canvas繪圖預(yù)備知識(shí)Canvas圖形，一般來說分為填三、Canvas繪圖預(yù)備知識(shí)補(bǔ)充：Canvas中的顏色Canvas中的顏色跟css中顏色非常類似。色彩的更改，一定要在正式繪圖之前。7PPT課件三、Canvas繪圖預(yù)備知識(shí)補(bǔ)充：Canvas中的顏色Can三、Canvas繪圖預(yù)備知識(shí)Canvas中的坐標(biāo)8PPT課件三、Canvas繪圖預(yù)備知識(shí)Canvas中的坐標(biāo)8PPT課件三、Canvas繪制基本圖形矩形rectangle通過路徑創(chuàng)建矩形直接畫出矩形清除canvas已有的圖形內(nèi)容（只能是矩形的區(qū)域）矩形是canvas唯一支持直接畫的形狀。其他形狀都必須通過一個(gè)或者多個(gè)路徑來創(chuàng)建9PPT課件三、Canvas繪制基本圖形矩形rectangle通過三、Canvas繪制基本圖形矩形rectangle直接畫出矩形矩形左上角x，y，寬，高10PPT課件三、Canvas繪制基本圖形矩形rectangle矩形三、Canvas繪制基本圖形練習(xí)：在canvas上，用鼠標(biāo)點(diǎn)哪里，哪里就出現(xiàn)一個(gè)10*10像素大小的矩形。11PPT課件三、Canvas繪制基本圖形練習(xí)：在canvas上，用鼠標(biāo)點(diǎn)三、Canvas繪制基本圖形補(bǔ)充：獲取標(biāo)簽里的鼠標(biāo)坐標(biāo)事件對(duì)象event.offsetXevent.offsetY12PPT課件三、Canvas繪制基本圖形補(bǔ)充：獲取標(biāo)簽里的鼠標(biāo)坐標(biāo)12P三、Canvas繪制基本圖形矩形rectangle通過路徑創(chuàng)建矩形

--canvas創(chuàng)建圖形的基本方法。

1、開始創(chuàng)建路徑：

ctx.beginPath();2、繪制圖形路徑：ctx.rect(100,100,200,200);3、關(guān)閉（封閉）路徑：ctx.closePath();--非必須視情況而定4、設(shè)置填充樣式或者線條樣式（這一步只要放在5之前都行）5、繪制：填充或畫線條ctx.fill()ctx.stroke()13PPT課件三、Canvas繪制基本圖形矩形rectangle1、三、Canvas繪制基本圖形矩形rectangle14PPT課件三、Canvas繪制基本圖形矩形rectangle14三、Canvas繪制基本圖形矩形rectangle

clearRect()一定要在繪制圖形之后，才有效果。15PPT課件三、Canvas繪制基本圖形矩形rectangle

c三、Canvas繪制基本圖形圓形、扇形arc

弧默認(rèn)順時(shí)針畫弧。

圓的弧度是0

到2*Math.PI16PPT課件三、Canvas繪制基本圖形圓形、扇形arc弧默認(rèn)順時(shí)三、Canvas繪制基本圖形圓形、扇形arc

弧描邊時(shí)，需注意closePath的先后。17PPT課件三、Canvas繪制基本圖形圓形、扇形arc弧17PP三、Canvas繪制基本圖形圓形、扇形arc

弧填充時(shí)，closePath的先后沒有關(guān)系。18PPT課件三、Canvas繪制基本圖形圓形、扇形arc弧18PP三、Canvas繪制基本圖形圓形、扇形arc

弧怎么畫出扇形？19PPT課件三、Canvas繪制基本圖形圓形、扇形arc弧19PP三、Canvas繪制基本圖形畫圓練習(xí)1：根據(jù)指定的百分比數(shù)據(jù)，畫出餅圖。如：[30,30,40]20PPT課件三、Canvas繪制基本圖形畫圓練習(xí)1：根據(jù)指定的百分比數(shù)據(jù)三、Canvas繪制基本圖形畫圓練習(xí)2：利用arc畫出奧運(yùn)5環(huán)21PPT課件三、Canvas繪制基本圖形畫圓練習(xí)2：利用arc畫出奧運(yùn)5三、Canvas繪制基本圖形直線

line在x，y坐標(biāo)起筆畫到x，y坐標(biāo)22PPT課件三、Canvas繪制基本圖形直線line在x，y坐標(biāo)起筆三、Canvas繪制基本圖形直線

linelineCap值：butt/round/square

平直圓形線帽正方形線帽lineJoin值：miter/round/bevel尖角圓角斜角23PPT課件三、Canvas繪制基本圖形直線linelineCap值三、Canvas繪制基本圖形直線

line畫多條，但不連續(xù)的直線24PPT課件三、Canvas繪制基本圖形直線line24PPT課件三、Canvas繪制基本圖形直線

line畫多條直線，但不連續(xù)的直線--添加了closePath()25PPT課件三、Canvas繪制基本圖形直線line25PPT課件三、Canvas繪制基本圖形直線

line怎么畫虛線？ctx.setLineDash([100,50]);線段、間距的長(zhǎng)度ctx.setLineDash([0]);恢復(fù)為實(shí)線26PPT課件三、Canvas繪制基本圖形直線linectx.set三、Canvas繪制基本圖形練習(xí)：根據(jù)指定數(shù)組，在canvas繪制表格。如[2,2],則繪制出2*2的表格。單元格寬高自擬。27PPT課件三、Canvas繪制基本圖形練習(xí)：根據(jù)指定數(shù)組，在canva三、Canvas繪制基本圖形思考：模仿windows繪圖板，做一個(gè)canvas繪圖板，可以調(diào)整線條顏色，粗細(xì)等等。28PPT課件三、Canvas繪制基本圖形思考：模仿windows繪圖板，三、Canvas繪制基本圖形曲線

29PPT課件三、Canvas繪制基本圖形曲線29PPT課件三、Canvas繪制基本圖形曲線

arcTo()如果我們想畫一條弧線，需要提供3個(gè)坐標(biāo)，開始點(diǎn)，控制點(diǎn)和結(jié)束點(diǎn)。開始點(diǎn)一般可以通過moveTo()或者lineTo()提供arcTo()提供控制點(diǎn)和結(jié)束點(diǎn).arcTo(x1,y1,

x2,y2,

半徑)30PPT課件三、Canvas繪制基本圖形曲線arcTo()30PPT三、Canvas繪制基本圖形曲線

arcTo(x1,y1,x2,y2,半徑)31PPT課件三、Canvas繪制基本圖形曲線31PPT課件三、Canvas繪制基本圖形曲線練習(xí)：畫一個(gè)圓角矩形，數(shù)據(jù)自擬，如下圖所示：32PPT課件三、Canvas繪制基本圖形曲線練習(xí)：畫一個(gè)圓角矩形，數(shù)據(jù)自四、Canvas中的漸變色Canvas中的漸變色分為：線性漸變徑向漸變33PPT課件四、Canvas中的漸變色Canvas中的漸變色分為：33P四、Canvas中的漸變色線性漸變addColorStop接受兩個(gè)參數(shù)：position：指定漸變中顏色所在的相對(duì)位置，0-1color：指定漸變中的顏色34PPT課件四、Canvas中的漸變色線性漸變addColorStop接四、Canvas中的漸變色徑向漸變這個(gè)方法接受六個(gè)參數(shù)：前三個(gè)參數(shù)描述一個(gè)圓（開始圓），后三個(gè)參數(shù)描述另一個(gè)圓（結(jié)束圓）。用于描述每個(gè)圓有三個(gè)參數(shù)，(x,y)表示圓心位置，r表示圓的半徑徑向漸變和線性漸變類似，同樣需要通過addColorSto