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()