canvas前端页面中有很多小方格,怎么画
发布网友
发布时间：2022-04-23 21:08
共1个回答
热心网友
时间：2022-04-20 00:32
。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在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>
