HTML5學習記錄（一）

一、`<video>` 視頻

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。
與之間插入的內容是供不支持 video 元素的瀏覽器顯示的。

二、 `<audio>`音頻

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式。
與之間插入的內容是供不支持 audio 元素的瀏覽器顯示的。

三、拖放（Drag 和 drop）

拖放是一種常見的特性，即抓取對象以後拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
1.設置元素爲可拖放

<img draggable="true" />

2.拖動元素（οndragstart=“drag(event)” ）

function drag(ev)
	{
			ev.dataTransfer.setData("Text",ev.target.id);
	}
	// dataTransfer.setData() 方法設置被拖數據的數據類型和值
	// 數據類型是 "Text"，值是可拖動元素的 id

3.放到何處（οndragοver=“allowDrop(event)”）
ondragover 事件規定在何處放置被拖動的數據。

function allowDrop(ev)
{
ev.preventDefault();
}
//默認情況下，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式（ev.preventDefault();）

4.進行放置（οndrοp=“drop(event)”）

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
    /*
    調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以鏈接形式打開）
    通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
    被拖數據是被拖元素的 id ("drag1")
    把被拖元素追加到放置元素（目標元素）中
    */

四、 `<canvas>`繪圖

<canvas> 標籤是 HTML 5 中的新標籤。
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成。

<canvas id="myCanvas" width="200" height="100"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");   // 使用 id 來尋找 canvas 元素
var cxt=c.getContext("2d");                             //創建 context 對象 , getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

fillStyle示例

定義一個漸變（從上到下）作爲矩形的填充樣式：

<body>
     <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
        
	<script type="text/javascript">
    
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		var my_gradient=ctx.createLinearGradient(0,0,0,170);
		my_gradient.addColorStop(0,"black");
		my_gradient.addColorStop(1,"white");
		ctx.fillStyle=my_gradient;
		ctx.fillRect(20,20,150,100);
    
    </script>
</body>

代碼分析：

createLinearGradient() 方法創建線性的漸變對象，漸變可用於填充矩形、圓形、線條、文本等等。
JavaScript語法：

context.createLinearGradient(x0,y0,x1,y1);

addColorStop() 方法規定 gradient 對象中的顏色和位置。
ps:可以多次調用 addColorStop() 方法來改變漸變。如果您不對 gradient 對象使用該方法，那麼漸變將不可見。爲了獲得可見的漸變，您需要創建至少一個色標。
JavaScript語法：

gradient.addColorStop(stop,color);

深入理解參數中座標的關係：

<body>
     <canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    
        
	<script type="text/javascript">
    
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		var my_gradient=ctx.createLinearGradient(0,0,150,150);   //重點關注行
		my_gradient.addColorStop(0,"pink");
		my_gradient.addColorStop(0.5,"blue");
		my_gradient.addColorStop(1,"red");
		ctx.fillStyle=my_gradient;
		ctx.fillRect(0,0,150,150);
		//ctx.fillStyle='#FF0000';   //爲了更加直觀地瞭解座標點，引入一個小矩形
		//ctx.fillRect(0,0,100,100);
    </script>
</body>

演示結果：【createLinearGradient(0,0,150,150);】

結論1：線性漸變方向P與漸變起點和漸變終點的連接線段L垂直。
（由於正方形比較特殊，驗證結果不具有普遍性，所以改用矩形來驗證結論）

<body>
     <canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    
        
	<script type="text/javascript">
    
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		var my_gradient=ctx.createLinearGradient(40,40,200,160);
		my_gradient.addColorStop(0,"pink");
		my_gradient.addColorStop(0.5,"blue");
		my_gradient.addColorStop(1,"red");
		ctx.fillStyle=my_gradient;
		ctx.fillRect(0,0,200,160);
		ctx.fillStyle='#FF0000';
		ctx.strokeRect(120,100,30,30);
		ctx.fillStyle='blue';
		ctx.fillRect(0,0,40,40);
		ctx.moveTo(40,40);
		ctx.lineTo(200,160);
		ctx.moveTo(120,100);
		ctx.lineTo(200,0);
		ctx.stroke(); 
    </script>
</body>

演示結果：

分析結果：

結論2：addColorStop()中的漸變參數 0~1 表示的是開始漸變的位置，具體位置是使用整體的漸變範圍乘上參數，得出距離。具體看示例：

<body>
     <canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    
        
	<script type="text/javascript">
    
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		var my_gradient=ctx.createLinearGradient(20,0,200,0);
		my_gradient.addColorStop(0.2,"pink");
		my_gradient.addColorStop(0.5,"blue");
		my_gradient.addColorStop(1,"red");
		ctx.fillStyle=my_gradient;
		ctx.fillRect(0,0,200,150);
		ctx.fillStyle='#FF0000';
		ctx.strokeRect(0,0,40,40);
		ctx.fillStyle='blue';
		ctx.strokeRect(0,0,56,56);
  
    </script>
</body>

演示結果：

分析結果：

線條

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle="#0000ff";  //筆觸顏色，即線條顏色
cxt.moveTo(10,10);      //起（終）點
cxt.lineTo(150,50);      //起（終）點
cxt.lineTo(10,50);       //起（終）點
cxt.stroke();    //stroke() 方法會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。
</script>

演示結果：

繪製兩條不同顏色的直線

<body>
     <canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    
        
	<script type="text/javascript">
    
		

			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			cxt.moveTo(10,10);
			cxt.lineTo(150,50);
			cxt.stroke(); 
			
			cxt.beginPath();       //開始一條路徑，或重置當前的路徑。
			cxt.strokeStyle="#0000ff";
			cxt.moveTo(30,110);
			cxt.lineTo(10,50);
			cxt.stroke();  


  
    </script>
</body>

演示結果：

矩形（rect）、填充矩形（fillRect）和無填充矩形（strokeRect）

JavaScript語法：

context.rect(x,y,width,height);
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);

ps：rect可以和 fillRect 或 strokeRect 的效果圖是一樣的，但是使用rect還需要用stroke() 或 fill() 來繪製矩形。如果使用 fill() 繪製，即表示填充繪圖，效果和fillRect一樣；如果使用 stroke() 繪製，即表示繪製路徑，效果和strokeRect一樣。

圓形（arc）

JavaScript語法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

arc() 方法創建弧/曲線（用於創建圓或部分圓）。

ps：

如需通過 arc() 來創建圓，請把起始角設置爲 0，結束角設置爲 2*Math.PI。
請使用 stroke() 或 fill() 方法在畫布上繪製實際的弧。

<body>
     <canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    
        
	<script type="text/javascript">
    
		

			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			/*  圓形 */
			cxt.beginPath();
			cxt.arc(50,50,20,0,2*Math.PI);
			cxt.stroke();  
			
			/*  弧形 */
			cxt.beginPath();
			cxt.arc(100,50,20,0,0.5*Math.PI);
			cxt.stroke();  
			
			/*  弧形 */
			cxt.beginPath();
			cxt.arc(170,50,20,1*Math.PI,0.5*Math.PI);
			cxt.stroke();  
			
			/*  筆觸爲紅色的弧形 */
			cxt.beginPath();
			cxt.arc(50,120,20,1*Math.PI,0.5*Math.PI);
			cxt.strokeStyle = "red";
			cxt.stroke(); 
			
			/*  被填充爲紅色的弧形 */
			cxt.beginPath();
			cxt.arc(100,120,20,1*Math.PI,0.5*Math.PI);
			cxt.fillStyle = "red";
			cxt.fill();

  
    </script>
</body>

演示結果：

HTML5學習記錄（一）

目錄

一、`<video>` 視頻

二、 `<audio>`音頻

三、拖放（Drag 和 drop）

四、 `<canvas>`繪圖

fillStyle示例

線條

矩形（rect）、填充矩形（fillRect）和無填充矩形（strokeRect）

圓形（arc）

這個網絡爬蟲代碼，拿到數據之後如何存到csv文件中去？

BGE M3-Embedding 模型介紹

即刻放大鏡。跟隨鼠標，屏幕任意位置放大

【面試準備】【SQL】數據庫有哪些約束？

.NET開源強大、易於使用的緩存框架 - FusionCache

面試，有時候是個運氣活

MyBatis自動生成實體類、DAO接口和Mapping映射文件

虛擬機下安裝Fedora教程

vue.js 入門知識點框架

HTML5學習記錄（二）

vue-cli指定版本安裝

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

HTML5學習記錄（一）

目錄

一、<video> 視頻

二、 <audio>音頻

三、拖放（Drag 和 drop）

四、 <canvas>繪圖

fillStyle示例

線條

矩形（rect）、填充矩形（fillRect）和無填充矩形（strokeRect）

圓形（arc）

一、`<video>` 視頻

二、 `<audio>`音頻

四、 `<canvas>`繪圖