您的位置：首页 > Web前端 > HTML5

HTML5中canvas画图之绘制方格图

2016-06-11 17:46 1171 查看

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制方格图</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></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>成功后截图为：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas html5

相关文章推荐

新的分享

章节导航