H5圖形、音頻、視頻常用知識總結(jié)

1、canvas繪制步驟

1.1、根據(jù)id屬性或其他選擇器選中canvas元素對象：

1.2、調(diào)用getContext方法獲取上下文，創(chuàng)建Context對象，以獲取繪制環(huán)境：
　　var context=canvas.getContext("2d");
1.3、繪制圖形

2、繪制圖形

2.1、繪制路徑型圖形：
　　context.beginPath() //新路徑開始
　　context.moveTo(startX,startY) //畫筆移動(dòng)到起點(diǎn)

context.lineTo(endX,endY) //直線要到達(dá)的終點(diǎn)
　　context.arcTo(controlX,controlY,endX,endY,radius) //繪制兩條切線之間的弧/曲線路徑
　　context.quadraticCurveTo(controlX,controlY,endX,endY) //繪制二次貝塞爾曲線路徑
　　context.bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY) //繪制三次貝塞爾曲線路徑
　　context.rect(startX,startY,width,height) //繪制矩形
　　context.arc(centerX,centerY,radius,startDeg,endDeg,dir) //繪制圓弧
　　參數(shù)說明：圓心坐標(biāo)，半徑，起始弧度，終止弧度，方向，0度在圓心正右邊，方向默認(rèn)為false，順時(shí)針方向
　　context.arc(centerX,centerY,radius,0,2*Math.PI,flase) //繪制圓

context.lineCap //線條端點(diǎn)樣式，三個(gè)可選值：butt/round/square
　　context.lineJoin //線條連接樣式，三個(gè)可選值：miter/round/bevel
　　context.lineWidth //線條寬度屬性
　　context.strokeStyle //線條顏色屬性

context.stroke() //上色，默認(rèn)為黑色

2.2、顏色填充
　　context.fillStyle //填充色屬性
　　context.fill() //填充顏色，默認(rèn)填充顏色為黑色
　　context.fillRect(startX,startY,width,height); //繪制填充式矩形

2.3、繪制陰影
　　context.shadowColor //陰影顏色
　　context.shadowBlur //陰影模糊度
　　context.shadowOffsetX //陰影水平距離
　　context.shadowOffsetY //陰影垂直距離

2.3、透明度：context.globalAlpha //取值0~1

2.4、漸變
　　var clg=context.createLinearGradient(startX,startY,endX,endY); //設(shè)置線性漸變軸向
　　var crg=context.createRadialGradient(X1,Y1,R1,X2,Y2,R2); //設(shè)置徑向漸變同心圓

clg.addColorStop(position(0~1),color) //設(shè)置漸變軸各點(diǎn)的顏色，一般會設(shè)置2個(gè)或2個(gè)以上的點(diǎn)
　　crg.addColorStop(position(0~1),color) //設(shè)置漸變直徑各點(diǎn)的顏色，一般會設(shè)置2個(gè)或2個(gè)以上的點(diǎn)
　　context.fillStyle=clg; //將漸變色用于填充色
　　context.fillStyle=crg; //將漸變色用于填充色
　　context.StrokeStyle=clg; //將漸變色用于線條顏色

2.5、圖案填充
　　var pat=contextcreatePattern(imgDomObj,repeatType)
　　context.fillStyle=pat; //將圖案設(shè)置為填充樣式

2.6、繪制圖像

<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">var imageObj=new Image();
imageObj.src=urlString;
imageObj.onload=function(){
　　context.drawImage(imageObj,startX,startY[,width,height])
　　context.drawImage(imageObj,cutStartX,cutStartY,cutWidth,cutHeight,drawStartX,drawStartY,drawWidth,drawHeight)
}</pre>

2.7、繪制文本

<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">context.font //文本樣式、大小、字體，默認(rèn)值為normal
context.textAlign //文本對齊方式
context.fillText(textString,startX,startY); //填充文本（實(shí)心字）
context.strokeText(text,startX,startY); //文本描邊（空心字）
var m=context.measureText(textString) //測量文本尺寸，返回一個(gè)尺度對象
var width=m.width;</pre>

3、圖形變換

<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">context.translate(x,y) //平移
context.rotate(deg) //旋轉(zhuǎn)(定位為弧度)
context.scale(x-ratio,y-ratio) //縮放
context.save() //保存狀態(tài)
context.restore() //恢復(fù)距離最近的狀態(tài)，一個(gè)狀態(tài)只能恢復(fù)一次</pre>

4、圖形組合

context.globalCompositeOperation //圖形組合方式
當(dāng)多個(gè)圖形重疊時(shí)，默認(rèn)為后來者居上

5、畫布裁切

一旦裁切了畫布中的某個(gè)區(qū)域，則畫布的其他區(qū)域所繪制的圖形都不可見
context.clip() //裁切距離最近閉合圖形

6、清空區(qū)域

context.clearRect(startX,startY,width,height); //清空矩形區(qū)域

7、音頻和視頻

h5之前，可以通過flash來插入視頻，但它有一些弊端: 1.先學(xué)習(xí)flash,增加使用成本 2.iphone,ipd,不支持flash

h5也可以利用embed標(biāo)簽插入視頻:可以直接插入音頻視頻，本質(zhì)是通過本機(jī)安裝的音頻視頻播放軟件來播放的。要求必須已經(jīng)安裝了這些軟件兼容性不好

使用h5可以很輕松地播放視頻和音頻

<video controls loop muted>
<source src="text.ogg" type="video/ogg"></source>
<source src="text.mp4" type="audio/mp4"></source> 您的瀏覽器不支持此功能 </video></pre>

常用方法：
　　play() 開始播放音頻/視頻
　　pause() 暫停當(dāng)前播放的音頻/視頻
常用屬性：
　　src 設(shè)置或返回音頻/視頻元素的當(dāng)前來源
　　autoplay 設(shè)置或返回是否在加載完成后隨即播放音頻/視頻
　　controls 設(shè)置或返回音頻/視頻是否顯示控件（比如播放/暫停等）
　　loop 設(shè)置或返回音頻/視頻是否應(yīng)在結(jié)束時(shí)重新播放
　　paused 設(shè)置或返回音頻/視頻是否暫停
　　volume 設(shè)置或返回音頻/視頻的音量
　　defaultPlaybackRate 設(shè)置或返回音頻/視頻的默認(rèn)播放速度
　　playbackRate 設(shè)置或返回音頻/視頻播放的速度
　　defaultMuted 設(shè)置或返回音頻/視頻默認(rèn)是否靜音
　　muted 設(shè)置或返回音頻/視頻是否靜音
　　duration 返回當(dāng)前音頻/視頻的長度（以秒計(jì)）
　　ended 返回音頻/視頻的播放是否已結(jié)束

poster:指定視頻還沒有完全下載完畢，或者用戶沒有點(diǎn)擊播放前顯示的封面。默認(rèn)顯示當(dāng)前視頻文件的第一副圖像

<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">注意事項(xiàng)：視頻始終會保持原始的寬高比。意味著如果你同時(shí)設(shè)置寬高，并不是真正的將視頻的畫面大小設(shè)置為指定的大小，而只是將視頻的占據(jù)區(qū)域設(shè)置為指定大小，除非你設(shè)置的寬高剛好就是原始的寬高比例。所以建議：在設(shè)置視頻寬高的時(shí)候，一般只會設(shè)置寬度或者高度，讓視頻文件自動(dòng)縮放，</pre>

轉(zhuǎn)載于:https://www.cnblogs.com/chuanzi/p/9579260.html

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

H5圖形、音頻、視頻常用知識總結(jié)