使用Canvas绘制简单的立方体-逐梦个人博客

Canvas的2D绘图环境对于3D图形比较立方体的绘制是很欠缺的，虽然我们可以用canvas的3D绘图环境webgl来绘制3D图形，但是webgl太复杂了，有点难整，我们也可以选用webgl的封装库threejs来进行绘制，但是有时候为了绘制一个简单的立方体而引入一个很大的库，未免不太好，所以我们可以考虑就用2D绘图环境来绘制，就比如说立方体，8个顶点六个面，我们将每个面的顶点链接然后把六个面拼起来就构成了一个立方体了。
实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Canvas绘制立方体</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
	<canvas id="canvas" width="800px" height="800px"></canvas>
    <script type="text/javascript">
    	var canvas = document.getElementById("canvas"),
    		ctx = canvas.getContext("2d"),
    		x = 100, 
    		y = 100,
    		z = 100;
    	var points = [
    		[0,0],
    		[x,0],
    		[x,-y],
    		[0,-y],
    		[z*Math.cos(45*Math.PI/180),-z*Math.sin(45*Math.PI/180)],
    		[z*Math.cos(45*Math.PI/180),-y-z*Math.sin(45*Math.PI/180)],
    		[x+z*Math.cos(45*Math.PI/180),-z*Math.sin(45*Math.PI/180)],
    		[x+z*Math.cos(45*Math.PI/180),-y-z*Math.sin(45*Math.PI/180)]
    	];
    	var faces = [
    		[points[4],points[5],points[7],points[6]], //后
    		[points[0],points[4],points[6],points[1]], //下
    		[points[0],points[3],points[5],points[4]], //左
    		[points[1],points[2],points[7],points[6]], //右
    		[points[2],points[3],points[5],points[7]], //上
    		[points[0],points[3],points[2],points[1]], //前
    	]
    	draw(0,300);
    	draw(300,300,true);
    	function draw(x,y,fill){
    		ctx.save();
    		ctx.translate(x,y);
	    	for(var i=0,len=faces.length;i<len;i++){
	    		var p = faces[i];
	    		ctx.beginPath();
	    		for(var j=0,l=p.length;j<l;j++){
	    			if(j==0){
	    				ctx.moveTo(p[j][0],p[j][1]);
	    			}else{
	    				ctx.lineTo(p[j][0],p[j][1]);
	    			}	
	    		}
	    		ctx.closePath();
	    		if(fill){
	    			ctx.fillStyle = randC();
	    			ctx.fill();
	    		}else{
	    			ctx.stroke();
	    		}
	    	}
	    	ctx.restore();
    	}
    	function randC(){
    		return 'rgb('+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    	}
    </script>
</body>
</html>

在线实例：http://demo.deanhan.cn/cube