基于cocos creator画六维图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zdhsoft/article/details/82750892

这个仅仅是一个代码例子。

1.cocos creator的左下方资源管理器，点右键，弹出菜单，创建一个Scene,默认名称就可以。

2.同样在再创建一个JavaScript，名称为drawsix

3.然后在双击这个scene，进入这个场景的编辑。在cocos creator的左上角的层级管理器的Canvas点，右键菜单创建一个空节点。

4.在左上角的层级管理器，选中这个节点，右边会这个节点的属性列表。然后为这个节点增加graphics和用户脚本组件。

注：这步很关键，没有这个graphics组件，是画不出来图的。

这样就完成组件设置，然后双击左下角的资源管理器中的drawsix这个js脚本，启动vscode进行编辑。输入下面代码，保存。

cc.Class({
    extends: cc.Component,

    properties: {
    },

    onLoad () {
        this.graphics = this.getComponent(cc.Graphics);
        this.graphics.lineWidth = 2;

		this.drawSixLine(200);
		this.drawSix(200);
	},
	//生成0.1-1之间的随机数
	randNumber() {
		let r = Math.random();
		if(r < 0.1) r = 0.1;
		return r;
	},
	//画六维图，并填充
	drawSix(paramLength) {
		let graphics = this.graphics;
		graphics.strokeColor.fromHEX('#00ff00');
		graphics.strokeColor.a = 0;
		let first = {x:0,y:0};
		for(let i = 0; i < 6; i++) {
			let ang = i/3 * Math.PI;
			let length = paramLength * this.randNumber();
			let x = length * Math.cos(ang);
			let y = length * Math.sin(ang);
			if(i === 0) {
				first.x = x;
				first.y = y;
				graphics.moveTo(x,y);
			}
			graphics.lineTo(x,y);
		}
		graphics.lineTo(first.x, first.y);
		graphics.moveTo(0,0);
		graphics.fillColor.fromHEX('#00ff00');
		graphics.fillColor.a = 125;
		graphics.fill();
		graphics.stroke();
	},
	//画六维线
	drawSixLine(paramLength) {
		let graphics = this.graphics;
        graphics.strokeColor.fromHEX('#ffffff');
		for(let i = 0; i < 6; i++) {
			let ang = i/3*Math.PI;
			let x = paramLength * Math.cos(ang);
			let y = paramLength * Math.sin(ang);
			graphics.moveTo(0,0);
			graphics.lineTo(x,y);
		}
		//画圈
		let r = 200/3;
		for(let i = 1; i < 4; i++) {
			graphics.circle(0,0,i*r);
		}
		graphics.stroke();
	},

    start () {

    },

});

最在确认当前的scene是不是自己刚创建的Scene，然后在cocos creator点运行，就可以了。

最后是运行结果：