canvas绘制大乐透数据图表

canvas绘制大乐透数据图表：canvas怎么绘制大乐透数据图表呢？希望下面的文章对大家有所帮助。

1.获取canvas元素

var a_canvas = document.getElementById('a_canvas')，
context = a_canvas.getContext("2d");

2.绘制背景
context.fillStyle = '#f3f2f2';
context.fillRect(0,0,a_canvas.width,a_canvas.height);

3. 画竖线
for (var col = 1; col < grid_cols; col++) {
var x = col * cell_width+(cell_width*3)-1;
context.moveTo(x,0);
context.lineTo(x,a_canvas.height);
}


//画横线
for(var row = 0; row < grid_rows+1; row++){
var y = row * cell_height;
context.moveTo(0,y);
context.lineTo(a_canvas.width, y);
}
context.stroke();

4.画圆形
for (var row = 0; row < grid_rows; row++){
context.beginPath();//红球
for (var col = 0; col < grid_cols; col++) {
var row_data = data[row][0].split(",");
var x = col * cell_width+8,
y = (row+1) * cell_height-6,
c_x = (col+4) * cell_width + cell_width/2,
c_y = (row+1) * cell_height-cell_height /2;
context.fillStyle="#ff8a00";//红色
if(parseInt(row_data[col])==0){
context.arc(c_x,c_y,7.5,0, 2*Math.PI, false);
}
}
context.fill()
context.beginPath();//篮球
for (var col = 0; col < grid_cols; col++) {
var row_blue = bludata[row][0].split(",");
var x = col * cell_width+8,
y = (row+1) * cell_height-6,
c_x = (col+4) * cell_width + cell_width/2,
c_y = (row+1) * cell_height-cell_height /2;
context.fillStyle="#6857ca";//蓝色
if(col > 34 && parseInt(row_blue[col-35])==0){
context.arc(c_x,c_y,7.5,0, 2*Math.PI, false);
}
}
context.fill()

}

5.遗漏值
context.beginPath();
for (var row = 0; row < grid_rows; row++){
var row_data = data[row][0].split(","),
row_blue = bludata[row][0].split(",");
for (var col = 0; col < grid_cols; col++) {
var x = (col+4) * cell_width+2,
y = (row+1) * cell_height-6,
c_x = (col+4) * cell_width + cell_width/2,
c_y = (row+1) * cell_height-cell_height /2,
num = col+1,
col_type = 'red';
//console.log(cell_width/2-5)
if(parseInt(row_data[col]) && col < 35){
context.fillStyle="#d2b0b0";//红色
num = row_data[col]
context.fillText(num, x,y);
yilou_list.push({x:x,y:y,num:num,col_type:col_type})
}else if( col > 34 && parseInt(row_blue[col-35]) ){
context.fillStyle="#d2b0b0";//蓝色
col_type = 'blue'
num = row_blue[col-35]
context.fillText(num, x,y);
yilou_list.push({x:x,y:y,num:num,col_type:col_type})
}else{
context.fillStyle="#fff";//球中数字
context.fillText(num, x,y);


}

}

}

6.填写期号
context.beginPath();
context.fillStyle="#464646";//填充颜色
console.log(grid_rows)
for (var col = 0; col < grid_rows; col++){
var x = (col+1)* cell_height-5
context.fillText(expect[col][0],18,x);
}
context.fill()