HTML的筆記及展示（3）（繪圖和多媒體支援相關）
阿新 • • 發佈：2019-01-04
實際應用中，我們使用HTML來完成繪圖和多媒體相關功能不是很常用，所以只要知道，需要用時查閱使用即可。
一、繪圖
<canvas…/>元素只是繪製圖形的容器，必須使用JavaScript指令碼來繪製圖形。
示例：
<canvas id="mc" width="300" height="180" style="border:1px solid black"></canvas> <script type="text/javascript"> //獲取canvas元素對應的DOM物件 var canvas = document.getElementById('mc'); //獲取在canvas上繪圖的CanvasRenderingContext2D物件 var ctx = canvas.getContext('2d'); //設定填充顏色 ctx.fillStyle = '#f00'; //繪製矩形 ctx.fillRect(30,40,80,100); </script>
因為<canvas…/>只是一個繪圖用的畫布，真正負責繪圖的是canvas物件的getContext()方法返回的CanvasRenderingContext2D物件。
二、多媒體
1.使用<audio…/>元素播放音訊
<h2>音訊播放</h2>
<audio src="七月的風八月的雨.mp3" controls></audio>
不支援<audio…/>元素的瀏覽器會顯示這段文字內容。
2.使用<video…/>元素播放視訊
<h2>視訊播放</h2> <video src="效果演示.avi" controls></video>
不支援<video…/>元素的瀏覽器會顯示這段文字內容。
在HTML頁面上放置了<audio…/>、<video…/>元素後，就相當於在頁面添加了一個內建支援的音訊、視訊播放器。只要指定了controls屬性，就會生成播放控制條。
HTML5目前推薦使用OGG Vobis壓縮格式。
只在這裡指出一些比較常用的元素，其他相關元素就不說了。