java知識總結-16

標籤：時區   cer   tput   步驟   視頻播放   好的   映像   stroke   圖案   

HTML5 中的一些新特性：
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制項，比如 calendar、date、time、email、url、search

新元素：
<canvas> 標籤定義圖形，比表和其他映像，您必須使用指令碼來繪製圖形。Canvas的座標是從左上方開始的，而且向下是Y的正方向，向右是X的正方向
（畫布 用於建立映像）
---------------------
****繪製圖形步驟
1.定義一個畫布
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 標籤通常需要指定一個id屬性 (指令碼中經常引用), width 和 height 屬性定義的畫布的大小.
2.找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
3.建立 context 對象：
var ctx=c.getContext("2d");
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法。
4.繪製圖形
下面的兩行代碼繪製一個紅色的矩形：
ctx.fillRect(0,0,150,75);
設定fillStyle屬性可以是CSS顏色，漸層，或圖案。fillStyle 預設設定是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式
畫線
ctx.moveTo(0,0);//定義開始座標
ctx.lineTo(200,100);//定義結束座標
ctx.stroke();//開始畫線
畫圓
ctx.beginPath();//
ctx.arc(95,50,40,0,2*Math.PI，false/true); //圓心開始座標（x/y） 圓的半徑 開始的弧度 結束的弧度 False = 順時針，true = 逆時針(可選)
ctx.stroke();
繪製文本
ctx.font="30px Arial";//選擇高度 字型
ctx.fillText("Hello World",10,50);// 內容 開始座標
----------------------
填充方式：
ctx.fillStyle="#FF0000"; //顏色填充
---------------
漸層：
// 建立漸層（線性漸層）
var grd=ctx.createLinearGradient(0,0,200,0); //漸層開始座標（x/y） 漸層結束座標（x/y）----在填充地區的座標
grd.addColorStop(0,"red"); //開始顏色 第一個參數可以是小數 （0~1） 用於確定不同位置
grd.addColorStop(1,"white"); //結束顏色
***********
// 填滿漸層
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); //漸層填充地區座標
**************
// 建立漸層（圓形漸層）
var grd=ctx.createRadialGradient(75,50,5,90,60,100); //內圓心座標（x/y） 漸層開始半徑 外圓心座標（x/y） 漸層結束半徑
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填滿漸層
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
***********cxt.strokeStyle=grd; 把漸層添加到對應元素上
---------------
圖片放到畫布上
var img=document.getElementById("scream");
ctx.drawImage(img,10,10); //圖片
*****
獲得畫布上的座標
*******
旋轉畫布
cxt.rotate(45*Math.PI/180); //旋轉的是畫布的座標系而不是圖形本身

 

元素的拖放
為了使元素可拖動，把 draggable 屬性設定為 true ：
<img draggable="true">
dataTransfer.setData() 方法設定被拖資料的資料類型和值：
setData() //設定值
ondragover 事件規定在何處放置被拖動的資料。
預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法：
當放置被拖資料時，會發生 drop 事件。

 

視頻播放
<video width="320" height="240" controls>
? <source src="movie.mp4" type="video/mp4">
? <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援Video標籤。
---<video> 元素支援多個 <source> 元素. <source> 元素可以連結不同的視頻檔案。瀏覽器將使用第一個可識別的格式：

 

音頻：
<audio controls>
? <source src="horse.ogg" type="audio/ogg">
? <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支援 audio 元素。
</audio>
****原則同視頻

輸入：
color 從拾色器中選擇一個顏色: <input type="color" name="favcolor">
data 定義一個時間控制器: 生日: <input type="date" name="bday">
datatime 定義一個日期和時間控制器（本地時間）: 生日 (日期和時間): <input type="datetime" name="bdaytime"> <!doctype> 聲明必須位於 HTML5 文檔中的第一行
datetime-local 定義一個日期和時間 (無時區): 生日 (日期和時間): <input type="datetime-local" name="bdaytime">
email 在提交表單時，會自動驗證 email 域的值是否合法有效: E-mail: <input type="email" name="email">
month 定義月與年 (無時區): 生日 (月和年): <input type="month" name="bdaymonth">
number 定義一個數值輸入欄位(限定): 數量 ( 1 到 5 之間，預設是5，步長為2 ): <input type="number" name="quantity" min="1" max="5" value="5" step="2">
range 定義一個不需要非常精確的數值（類似於滑塊控制）: <input type="range" name="points" min="1" max="10">
search 定義一個搜尋欄位 (類似網站搜尋或者Google搜尋): Search Google: <input type="search" name="googlesearch">
tel 定義輸入電話號碼欄位: 電話號碼: <input type="tel" name="usrtel">
url 定義輸入URL欄位: 添加您的首頁: <input type="url" name="homepage">

 

表單元素：
<keygen> 元素的作用是提供一種驗證使用者的可靠方法。
<keygen>標籤規定用於表單的金鑰組產生器欄位。
當提交表單時，會產生兩個鍵，一個是私密金鑰，一個公開金鑰。
私密金鑰（private key）儲存於用戶端，公開金鑰（public key）則被發送到伺服器。公開金鑰可用於之後驗證使用者的用戶端認證（client certificate）。
-----------------
<datalist> <input>標籤定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen> ><keygen> 標籤規定用於表單的金鑰組產生器欄位。
<output> <output> 標籤定義不同類型的輸出，比如指令碼的輸出。

 

 

HTML5 的改進
新元素
新屬性
完全支援 CSS3
Video 和 Audio
2D/3D 製圖
本機存放區
本地 SQL 資料
Web 應用程式

 

畫扇形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.moveTo(400, 300); //設定開始點
ctx.arc(400,300,260,0*Math.PI,2.0*Math.PI);
ctx.fillStyle="#aaaaaa";//設定填充色
ctx.fill(); //填充
ctx.closePath(); //回到開始點
ctx.stroke();
------實現畫圖並填充扇形

java知識總結-16