1.在canvas上绘制商标：
有趣的canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第六章在浏览器中画图</title>
</head>
<body>
<h1>6.1在画布上绘制商标</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 测试</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();
// 为对象设置渐变效果&可是在这并没有起作用
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.多媒体的使用---音频，视频（其实初始界面也还不错，而且代码也特别少）
音频视频测试
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入音频和视频</title>
</head>
<body>
<h1>音频测试</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.伪类设置表格样式
表格
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用伪类设置表格样式</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.进度条以及在图片上定位，最简单的使用方式，无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>中华进度条</h3>
<meter value="2500.00" title="中华进度条" 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>
