版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 魯教版八年級(jí)數(shù)學(xué)上冊(cè)第三章數(shù)據(jù)的分析素養(yǎng)綜合檢測(cè)課件
- 14 回憶我的母親 課件人教版2024七年級(jí)語文上冊(cè)
- 牛津譯林七年級(jí)語法總結(jié)
- 企業(yè)倫理學(xué)(原書第5版) 課件 第9章 環(huán)境與企業(yè)的可持續(xù)發(fā)展
- 山東省菏澤市2024-2025學(xué)年高三上學(xué)期期中考試 化學(xué) 含解析
- 部編版小學(xué)語文五年級(jí)上冊(cè)18課《慈母情深》反復(fù)修辭手法的認(rèn)識(shí)和好處
- 【核心素養(yǎng)】部編版小學(xué)語文一年級(jí)上冊(cè)-第5單元主題閱讀(含答案)
- 云南省文山壯族苗族自治州富寧上海新紀(jì)元外國(guó)語學(xué)校2024-2025學(xué)年高二上學(xué)期期中考試地理試題(無答案)
- 八年級(jí)生物期中模擬卷(考試版A4)【測(cè)試范圍:第1-4章】
- 茶道基礎(chǔ)知識(shí)題庫單選題100道及答案解析
- 國(guó)家開放大學(xué)《現(xiàn)代漢語專題》章節(jié)自測(cè)參考答案
- 臨時(shí)用電配電系統(tǒng)圖
- 農(nóng)業(yè)統(tǒng)計(jì)課件
- 音樂《彩云追月》課件
- SC200200施工升降機(jī)拆除施工方案
- DBJ50T-396-2021山地城市地下工程防滲堵漏技術(shù)標(biāo)準(zhǔn)
- 訂單登記表模板
- 班主任工作經(jīng)驗(yàn)交流課件1
- (完整)斯坦福-國(guó)際標(biāo)準(zhǔn)智商測(cè)試(45分鐘60題)標(biāo)準(zhǔn)答案
- 滬科版八年級(jí)上冊(cè)數(shù)學(xué)教學(xué)計(jì)劃及進(jìn)度表
- 咳嗽(急性支氣管炎)中醫(yī)臨床路徑住院表單
評(píng)論
0/150
提交評(píng)論