HTML5中canvas画图之绘制方格图_H5之家 - 中国HTML5教程资源分享第一站

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。下面是具体代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制方格图</title> </head> <body> <canvas></canvas> <script type="text/javascript"> //获取上下文 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //描绘背景 var gradient=ctx.createLinearGradient(0,0,0,300);//createLinearGradient() 方法创建线性的渐变对象。 gradient.addColorStop(0,"#e0e0e0"); gradient.addColorStop(1,"#ffffff"); ctx.fillStyle=gradient; ctx.fillRect=(0,0,canvas.width,canvas.height); //描绘边框 var grid_cols=10; var grid_rows=10; var cell_height=canvas.height/grid_rows; var cell_width=canvas.width/grid_cols; ctx.lineWidth=1; ctx.strokeStyle="#a0a0a0"; //结束边框描绘 ctx.beginPath(); //准备画横线 for(var col=0;col<=grid_cols;col++) { var x=col*cell_width; ctx.moveTo(x,0); ctx.lineTo(x,canvas.height); } //准备画竖线 for(var row=0;row<=grid_rows;row++) { var y=row*cell_height; ctx.moveTo(0,y); ctx.lineTo(canvas.width,y); } //完成描绘 ctx.stroke(); </script> </body> </html>成功后截图为：