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>