canvas前端页面中有很多小方格，怎么画_软件运维

。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖余拿线即可。

<!DOCTYPE html>

<head>

<title>绘制方格图</title>

</head>

<body>

//获取上下文

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=0col<=grid_colscol++)

{

var x=col*cell_width

ctx.moveTo(x,0)

ctx.lineTo(x,canvas.height)

}

//准备画竖线

for(var row=0row<=grid_rowsrow++)

{

var y=row*cell_height

ctx.moveTo(0,y)

ctx.lineTo(canvas.width,y)

}

//完成描绘

ctx.stroke()

</script>

</body>

</html>

先选椭圆工具画出一个椭圆。然后进行填充一种颜色，然后点击菜单“选择”，点击变换选区，在上面设置参数栏中的W、H中输入边框宽度后按回车。然后按“Delete”键，清除掉中间的图形。这样就完成了一个边框。如果要变换颜档慧色或清除掉边框中的颜色，只要把这个椭基团圆图层载入行锋答选区，进行填色或Delete就行了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12450817.html

canvas前端页面中有很多小方格，怎么画

发表评论

评论列表（0条）