HTML5图像

canvas

canvas是HTML5提供的新标签，通过js可以绘制图形并实现动画。

		<canvas id="canvas" width="480" height="320"></canvas>
		<script>
			// 获取画布标签
			var canvas = document.getElementById("canvas");
			// 得到2d画布
			var ctx = canvas.getContext("2d");
			// 绘制图形
			ctx.fillStyle = "#009DDC";
			ctx.fillRect(100,200,400,400)	
		</script>

svg

svg是可缩放矢量图形，基于xml,svg的图像无论尺寸多少都不会模糊和失真

		<svg width="450" height="450" xmlns="http://www.w3.org/2000/svg">
			<g stroke-width="10" fill="none">
				<circle stroke="#006BB0" r="50" cy="117" cx="100"/>
				<circle stroke="#EFA90D" r="50" cy="117" cx="240"/>
				<circle stroke="#1D1815" r="50" cy="117" cx="380"/>
			</g>
		</svg>

WebGL

WebGL是渲染3d用的，Three.js大大的解决了入门的难度。这是使用THREE.js做得一个简单的例子

		<script src="../js/three.js"></script>
		<script>
			var renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(400,300);
			document.body.appendChild(renderer.domElement)
			
			var camera = new THREE.PerspectiveCamera(60,400 / 300,1 ,5000);
			camera.position.z = 500;
			
			var scene = new THREE.Scene();
			var cube = new THREE.Mesh(
				new THREE.BoxGeometry(200,200,200),
				new THREE.MeshBasicMaterial({color:0x6699cc,wireframe:true})
				);
			cube.rotation.x = 0.5;
			cube.rotation.y = 0.5;
			scene.add(cube);
			
			renderer.render(scene,camera);
		</script>