HTML學習筆記

1.video 標籤

  src：路徑

  height ：高

  width ：寬

  autoplay： 視頻加載完畢自動播放

 controls ：controls 提供播放暫定等操做按鈕

<video src="audio/shake.wav"  height="1000px;" width="1000px;" autoplay="autoplay" controls="controls"></video>

2.audio 標籤

同上

<audio src="audio/friendship.mp3" autoplay="autoplay" controls="controls"></audio>

3.canvas

<canvas id="c1" onmousemove="asm(event)" onmouseout="ost()"></canvas>

3.1繪製規則長方形

　

　var cc1=document.getElementById("c1");
　　var c2d=cc1.getContext("2d"); //獲取繪圖對象
　　c2d.fillStyle="#0000FF";  //填充的樣式

     c2d.strokeStyle//邊框樣式
　　c2d.fillRect(100,10,150,175); //起點x,y寬高 -邊框      c2d.strokeRect(100,10,150,175); //起點x,y寬高  -填充模式

  　function asm(e){
　　var x=e.clientX; //獲取X的值
　　var y=e.clientY; //獲取Y的值
　　document.getElementById("show").innerHTML="X:"+x+"-y:"+y;　　
　　}
　　function ost(){
　　document.getElementById("show").innerHTML="";　　
　　}

 

3.2繪製三角形

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

　　var can1=document.getElementById("ca1").getContext("2d");
　　can1.moveTo(10,10);
　　can1.lineTo(150,50);
　　can1.lineTo(10,50);
　　can1.fill(); //填充
　　can1.stroke(); //繪製邊界