[Canvas绘图] 第27节 三维初探

本节目标：
(1)  绘制椭圆
(2)  绘制简单三维图形

实现步骤：

采用贝氏曲线绘制椭圆

	//绘制椭圆
	function  BezierEllipse1(x, y, a, b, rotate) {
		//关键是bezierCurveTo中两个控制点的设置 
		//0.5和0.6是两个关键系数（在本函数中为试验而得） 
		var ox = 0.5 * a, 
		oy = 0.6 * b; 
		var rot = rotate ? -rotate : 0;
		context.save(); 
		context.rotate(rot);
		context.translate(x, y); 
		context.beginPath(); 
		//从椭圆纵轴下端开始逆时针方向绘制 
		context.moveTo(0, b); 
		context.bezierCurveTo(ox, b, a, oy, a, 0); 
		context.bezierCurveTo(a, -oy, ox, -b, 0, -b); 
		context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0); 
		context.bezierCurveTo(-a, oy, -ox, b, 0, b); 
		context.closePath(); 
		context.stroke(); 
		context.restore(); 

	}

为了试验，我采取了一种并不是很好的方法来绘制长方体类图形。

	//绘制三维体
	var arr = [-0.5, -0.5, 0.5, - 0.5, 0.5, 0.5, -0.5, 0.5];
	var arr2 = [-0.5, -0.5, 0.5, - 0.5, 0.5, 0.5, -0.5, 0.5];
	var xtrans = [-0.5, 0, -0.5, 0, 0.5, 0, 0.5, 0];
	
	var len = arr.length;
	var point = Math.floor(arr.length / 2);
	var scale = 200;
	var ydown = 100;
	var xdown = 0;
	
	//上面
	//x
	for (var i = 0; i < len; i+=2) {
		arr[i] += xtrans[i];
		arr[i] = arr[i] * scale ;		
	}
	//y
	for (var i = 1; i < len; i+=2) {
		arr[i] += xtrans[i];
		arr[i] = -arr[i] * scale * 0.5-100;
	}
	
	//下面
	//x
	for (var i = 0; i < len; i+=2) {
		arr2[i] += xtrans[i];
		arr2[i] = arr2[i] * scale