1.在canvas上繪制商標(biāo)：
有趣的canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第六章在瀏覽器中畫(huà)圖</title>
</head>
<body>
<h1>6.1在畫(huà)布上繪制商標(biāo)</h1>
<canvas id="my-canvas" width="150" height="150">
</canvas>
<script>
var canvas1 = document.getElementById('my-canvas');
if (canvas1.getContext){
var context = canvas1.getContext('2d');
context.fillStyle = 'rgb(200,0,0)';
context.fillRect(10,10,100,100);
context.fillStyle = 'rgb(0,200,0)';
context.fillRect(20,20,100,100);
context.fillStyle = 'rgb(0,0,200)';
context.fillRect(30,30,100,100);
}
</script>
<h1>logo 測(cè)試</h1>
<canvas id="logo" width="500" height="60"><h1>IOTZZH</h1></canvas>
<script>
var drawLogo = function () {
var canvas2 = document.getElementById('logo');
var context = canvas2.getContext('2d');
context.fillStyle = '#FF0000';
context.strokeStyle = '#FF0000';
context.lineWidth = 2;
context.beginPath();
context.moveTo(0,40);
context.lineTo(30,0);
context.lineTo(60,40);
context.lineTo(285,40);
context.font = 'italic 40px "Arial"';
context.fillText('I O T Z Z H',60,36);
context.stroke();
context.closePath();
// 大三角形下的小方塊
context.save();
context.translate(20,20);
context.fillRect(0,0,20,20);
context.fillStyle= '#FFFFFF';
context.strokeStyle = '#FFFFFF';
context.lineWidth = 2;
context.beginPath();
context.moveTo(0,20);
context.lineTo(10,0);
context.lineTo(20,20);
context.lineTo(0,20);
context.fill();
context.closePath();
context.restore();
// 為對(duì)象設(shè)置漸變效果&可是在這并沒(méi)有起作用
var gradient = context.createLinearGradient(0,0,0,40);
gradient.addColorStop(0,'#AA00000');//暗紅色
gradient.addColorStop(1,'#FF00000');//紅色
context.fillStyle = gradient;
context.strokeStyle = gradient;
};
var canvas2 = document.getElementById('logo');
if (canvas2.getContext){
drawLogo();
}
</script>
</body>
</html>
2.多媒體的使用---音頻哺眯，視頻（其實(shí)初始界面也還不錯(cuò)，而且代碼也特別少）
音頻視頻測(cè)試
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入音頻和視頻</title>
</head>
<body>
<h1>音頻測(cè)試</h1>
<audio id="mp3-test" controls>
<source src="../music/test.mp3" type="audio/mpeg">
<a href="../music/test.mp3">MP3下載</a>
</audio>
<h1>視頻</h1>
<video id="video-test" controls style="width: 300px;">
<source src="../video/test.mp4" type="video/mp4">
</video>
</body>
</html>
3.偽類(lèi)設(shè)置表格樣式
表格
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用偽類(lèi)設(shè)置表格樣式</title>
<style type="text/css">
table{border-collapse: collapse;width: 600px;}
th,td{border: none;}
th{background-color:#000;color:#fff;}
tr:nth-of-type(even){color:red;}
tr:nth-of-type(odd){
color:black;
}
table tr:nth-child(3){
background-color:yellow;
}
table tr:nth-last-child(6){
color: #00CCFF;
background-color:red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>Coffe</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td>Coffe</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td>Coffe</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td colspan="3">Subtotal</td>
<td>$198.00</td>
</tr>
<tr>
<td colspan="3">Shipping</td>
<td>$198.00</td>
</tr>
<tr>
<td colspan="3">Total Due</td>
<td>$198.00</td>
</tr>
</table>
</body>
</html>
4.進(jìn)度條以及在圖片上定位就谜，最簡(jiǎn)單的使用方式挺益，無(wú)js操作牲尺。
H5新特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meter</title>
<style type="text/css">
meter{width:280px;}
.map{width: 500px;height:500px; background-color: #00FF00; overflow: hidden;}
.area{ background-color: #00AA88; }
</style>
</head>
<body>
<h3>中華進(jìn)度條</h3>
<meter value="2500.00" title="中華進(jìn)度條" id="pledge_goal" min="0" max="5000.00"></meter>
<p>help us reach our goal of $5000</p>
<progress id="progressbar" min="0" max="5000" value="200"></progress>
<p>help us reach our goal of $5000</p>
<div class="map">
<map name="planetmap" id="planetmap">
<div class="area"><area shape="circle" coords="300,200,50" href ="#" alt="Venus" /></div>
<area shape="circle" coords="129,161,100" href ="#" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="#" alt="Sun" />
</map>
</div>
</body>
</html>
