本节目标:
(1) 绘制数字
(1) 绘制数字
实现步骤:
电子数字中笔画最多的是"8"字,把它绘制出来后,其它九个数字可以通过减笔画快速生成,包装一个Digit类.
/**
* @usage 数字形状
* @author mw
* @date 2015年12月01日 星期二 15:57:45
* @param
* @return
*
*/
function Digit() {
var shape = new Shape();
//8
this.eight = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
shape.fillRect(x, y, h, w0); //中横
shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.one = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
//shape.fillRect(x, y, h, w0); //中横
//shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
//shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
//shape.fillRect(x, y-h, h, w0); //上横
//shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.two = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
shape.fillRect(x, y, h, w0); //中横
//shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
shape.fillRect(x-w, y+w, w0, h); //下左竖
//shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.three = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
shape.fillRect(x, y, h, w0); //中横
//shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
//shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.four = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
shape.fillRect(x, y, h, w0); //中横
shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
//shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
//shape.fillRect(x, y-h, h, w0); //上横
//shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.five = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
shape.fillRect(x, y, h, w0); //中横
shape.fillRect(x-w, y-w, w0, h); //上左竖
//shape.fillRect(x+w, y-w, w0, h); //上右竖
//shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.six = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
shape.fillRect(x, y, h, w0); //中横
shape.fillRect(x-w, y-w, w0, h); //上左竖
//shape.fillRect(x+w, y-w, w0, h); //上右竖
shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.seven = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
//shape.fillRect(x, y, h, w0); //中横
//shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
//shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
//shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.nine = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
shape.fillRect(x, y, h, w0); //中横
shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
//shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
this.zero = function(x, y, r) {
plot.save();
var h = r * 0.45; //字半高
var w = h / 2.2; //字半宽
var w0 = r *0.1; //填充宽
/*
shape.strokeRect(x, y, h, w0); //中横
shape.strokeRect(x-w, y-w, w0, h); //上左竖
shape.strokeRect(x+w, y-w, w0, h); //上右竖
shape.strokeRect(x-w, y+w, w0, h); //下左竖
shape.strokeRect(x+w, y+w, w0, h); //下右竖
shape.strokeRect(x, y-h, h, w0); //上横
shape.strokeRect(x, y+h, h, w0); //下横
*/
//填充
//shape.fillRect(x, y, h, w0); //中横
shape.fillRect(x-w, y-w, w0, h); //上左竖
shape.fillRect(x+w, y-w, w0, h); //上右竖
shape.fillRect(x-w, y+w, w0, h); //下左竖
shape.fillRect(x+w, y+w, w0, h); //下右竖
shape.fillRect(x, y-h, h, w0); //上横
shape.fillRect(x, y+h, h, w0); //下横
plot.restore();
}
}
这样就可以调用:
var digit = new Digit();
digit.eight(50,20,90);
digit.one(100, 20, 90);
digit.two(150, 20, 90);
digit.three(220, 20, 90);
digit.four(270, 20, 90);
digit.five(320, 20, 90);
digit.six(370, 20, 90);
digit.seven(420, 20, 90);
digit.nine(470, 20, 90);
digit.zero(520, 20, 90);
得到结果:
但是这样不适合用作循环,所以我又加了一个封装函数:
/**
* @usage 绘制数字
* @author mw
* @date 2015年12月01日 星期二 16:50:23
* @param n [0-9] 要绘制的数字 x, y, 中心点 r 外接圆尺寸
* @return
*
*/
this.number = function(n, x, y, r) {
switch (n) {
case 0: this.zero(x, y, r); break;
case 1: this.one(x, y, r); break;
case 2: this.two(x,y,r); break;
case 3: this.three(x, y, r); break;
case 4: this.four(x,y,r);break;
case 5: this.five(x,y,r);break;
case 6: this.six(x,y,r); break;
case 7: this.seven(x,y,r); break;
case 8: this.eight(x,y,r); break;
case 9: this.nine(x,y,r); break;
default:break;
}
}
可以这样调用:
var r = 50;
for (var i = 0; i < 10; i++) {
digit.number(i, i * 50, 50, 50);
}
结果图:
这节就到这里。