1，建立一個canvas?畫布：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 body { 10 background: #f00; 11 } 12 #canvas { 13 background: #000; 14 } 15 </style> 16 </head> 17 <body> 18 <canvas id="canvas" width="300" height="200"></canvas> 19 </body> 20 </html>
1.2? 動態創建canvas ：
1 <style> 2 #canvas { 3 border: 1px solid blue; 4 } 5 </style> 6 <script> 7 window.onload = function() { 8 var Ocanvas = document.createElement('canvas'); 9 // Ocanvas.style.width = "300"; 10 // Ocanvas.style.height = "200"; 11 // Ocanvas.style.background = "red"; 12 Ocanvas.id = "canvas"; 13 Ocanvas.width = "300"; 14 Ocanvas.height = "200"; 15 Ocanvas.style.background = "red"; 16 document.body.appendChild(Ocanvas); 17 } 18 </script>
1.3?使用canvas :畫直線
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 #canvas { 10 border: 1px solid blue; 11 background: white; 12 } 13 14 body { 15 background: black; 16 } 17 </style> 18 <script> 19 window.onload = function() { 20 var Ocanvas = document.getElementById("canvas"); 21 var Og = Ocanvas.getContext('2d'); // 獲取2d 繪圖環境 22 Og.lineWidth = 10; // 線條寬度 23 Og.strokeStyle = "#1133fb"; // 線條樣式 24 Og.moveTo(100, 100); //起始點 25 Og.lineTo(200, 200); //結束點 26 Og.stroke(); // 渲染 27 } 28 </script> 29 </head> 30 <body> 31 <canvas id="canvas" width="500" height="250"></canvas> 32 </body> 33 </html>
?
1.4?canvas?作畫：畫圓弧
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 #canvas { 10 border: 1px solid blue; 11 background: white; 12 } 13 body { 14 background: black; 15 } 16 </style> 17 <script> 18 window.onload = function() { 19 var Ocanvas = document.getElementById("canvas"); 20 var Og = Ocanvas.getContext('2d'); // 獲取2d 繪圖環境 21 //beginPath() 方法開始一條路徑，或重置當前的路徑。 22 Og.beginPath(); 23 Og.lineWidth = 10; 24 Og.strokeStyle = "#aa0072"; 25 // 畫圓，第一個參數為圓心的x,第二個參數為圓心的y,第三個參數為圓的半徑，第四個參數為圓的起始點，第五個參數為圓的結束點，第六個參數為畫圓的方向（false為順時針，true為逆時針） 26 Og.arc(150, 100, 70, 0, 2 * Math.PI / 4, false); 27 Og.stroke(); // 渲染 28 } 29 </script> 30 </head> 31 <body> 32 <canvas id="canvas" width="500" height="250"></canvas> 33 </body> 34 </html>
運行結果：
?
2.1? sessionStorage?基礎：瀏覽器上的臨時變量，只要不關閉，臨時變量就一直存在，直到關閉瀏覽器。臨時變量的設置：window.sessionStorage.setItem('name','值');? 獲取臨時變量：window.session.getItem('name')
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 </style> 10 <script> 11 window.onload = function() { 12 var abtn = document.querySelectorAll("input"); 13 var obj = { 14 name: "huanying2015", 15 sex: "man", 16 age: 25 17 } 18 abtn[0].onclick = function() { 19 // sessionStorage 存儲在瀏覽器上的臨時變量，只要不關閉瀏覽器，就一直存在，只要一關比瀏覽器，就不存在了 20 window.sessionStorage.setItem('name', obj['name']); 21 } 22 abtn[1].onclick = function() { 23 alert(window.sessionStorage.getItem('name')); 24 } 25 abtn[2].onclick = function() { 26 // 清除瀏覽器上的臨時變量 27 window.sessionStorage.removeItem("name"); 28 } 29 } 30 </script> 31 </head> 32 <body> 33 <input type="button" value="設置"> 34 <input type="button" value="獲取"> 35 <input type="button" value="刪除"> 36 </body> 37 </html>
運行結果：
?
?
?
2.2? localStorage :永久性存儲，與sessionStorage不同的是，關閉瀏覽器，變量的值也不會消失
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script> 9 window.onload = function() { 10 var aInput = document.querySelectorAll("input"); 11 var obj = { 12 name: 'huanying2015', 13 sex: 'man', 14 age: 25 15 } 16 aInput[0].onclick = function() { 17 window.localStorage.setItem('name', obj['name']); 18 window.localStorage.setItem('sex', obj['sex']); 19 window.localStorage.setItem('age', obj['age']); 20 } 21 aInput[1].onclick = function() { 22 alert(window.localStorage.getItem('name') + '------' + window.localStorage.getItem('sex') + '-------' + window.localStorage.getItem('age')); 23 } 24 aInput[2].onclick = function() { 25 window.localStorage.removeItem('name'); 26 window.localStorage.removeItem('sex'); 27 window.localStorage.removeItem('age'); 28 } 29 } 30 </script> 31 </head> 32 <body> 33 <input type="button" value="設置" /> 34 <input type="button" value="獲取" /> 35 <input type="button" value="刪除" /> 36 </body> 37 </html>
運行結果：關閉瀏覽器之后，之前設置的變量還在，還可以直接通過window.localStorage.getItem('屬性名')?來直接獲取
?
3. localStorage?的應用：在網頁中輸入變量名稱，關閉網頁時，變量名稱存儲的值還在，當再次打開網頁時，瀏覽器直接調用 localStorage?中的值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 </style> 10 <script> 11 window.onload = function() { 12 var aInput = document.querySelectorAll("input"); 13 var Otxt = document.querySelector("textarea"); 14 if (window.localStorage.getItem('userName123')) { 15 aInput[0].value = window.localStorage.getItem('userName123'); 16 } 17 for (var i = 0, len = aInput.length; i < len; i++) { 18 if (window.localStorage.getItem('sex1') == aInput[i].value) { 19 aInput[i].checked = true; 20 } 21 } 22 if (window.localStorage.getItem('shuoming')) { 23 Otxt.value = window.localStorage.getItem('note'); 24 } 25 26 window.onunload = function() { 27 if (aInput[0].value) { 28 window.localStorage.setItem('userName123', aInput[0].value); 29 } 30 for (var i = 0, len = aInput.length; i < len; i++) { 31 if (aInput[i].checked == true) { 32 window.localStorage.setItem('sex1', aInput[i].value); 33 } 34 } 35 if (Otxt.value) { 36 window.localStorage.setItem('shuoming', Otxt.value); 37 } 38 } 39 } 40 </script> 41 </head> 42 <body> 43 <p> 44 用戶名：<input type="text"> 45 </p> 46 <br> 47 <p> 48 性別：<br> 49 <input type="radio" name="sex1" value="男"> 男 50 <input type="radio" name="sex1" value="女"> 女 51 </p> 52 <p> 53 備注： 54 <textarea name="" id="" cols="30" rows="10"></textarea> 55 </p> 56 </body> 57 </html>
運行結果：
?
)
