canvas绘制竖排的数字_canvas画数字

1HTML先写一个div给个ID名字

2js中获取元素

var myCanvas = document.getElementById('mycanvas');

3设置宽度和高度

myCanvas.width = document.documentElement.clientWidth;

myCanvas.height = document.documentElement.clientHeight;

4获取(2d对象绘画环境()

var cxt = myCanvas.getContext('2d');

5定义距离左侧的偏移

var l = 100;

6距离顶部的偏移

var t = 60;

7设计数字的存储描述5数字的组成

var dots = [

[1,1,1,1,1,1,1],

[1,1,0,0,0,0,0],

[1,1,0,0,0,0,0],

[1,1,1,1,1,1,0],

[0,0,0,0,0,1,1],

[0,0,0,0,0,1,1],

[0,0,0,0,0,1,1],

[0,0,0,0,0,1,1],

[1,1,0,0,0,1,1],

[0,1,1,1,1,1,0]

];

8圆的半径

var R = 10;

9遍历该数字下所有的圆

for(var i=0;i

for(var j=0;j

// 如果是1，化缘；否则跳过

if(dots[i][j]!=1){

continue;

}

// 当前的值

// dots[i][j]

// 此刻该位置的圆的圆心坐标 第(i,j)个圆

var centerX = l + j*2*(R+1) + R+1;

var centerY = t + i*2*(R+1) + R+1;

// 绘制

cxt.beginPath();

// 绘制圆

cxt.arc(centerX,centerY,R,0,2*Math.PI);

// 填充

cxt.fillStyle = 'blue';

// 填充

cxt.fill();

cxt.closePath();

}

}