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