HTML5中canvas画图之绘制方格图

港控/mmm° 2022-08-23 05:58 344阅读 0赞

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在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>

成功后截图为：

![SouthEast][]

[SouthEast]: /images/20220721/4abcd62452ae44099499d3a95b1cfdf5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，344人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5的canvas绘制方格（边框随即色）

[文章地址 https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan] 两个循环绘制

落日映苍穹つ/ 2023年06月05日 08:11/ 0 赞/ 98 阅读

相关 HTML5——Canvas绘制曲线

Canvas绘制曲线绘制曲线绘制圆形绘制弧形二次贝塞尔

太过爱你忘了你带给我的痛/ 2023年03月01日 09:17/ 0 赞/ 267 阅读

相关 html5绘制div,HTML5 Canvas 绘制图像

canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG，GIF，JPEG等)都可以引入到 canvas 中，而且其它的 canv

本是古典何须时尚/ 2022年10月06日 13:56/ 0 赞/ 252 阅读

相关 HTML5中canvas画图之绘制数据图表

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下: ![Center][] 实现代码如下: <!DOCTYPE html> <ht

悠悠/ 2022年08月23日 08:10/ 0 赞/ 237 阅读

相关 HTML5中canvas画图之绘制方格图

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

港控/mmm°/ 2022年08月23日 05:58/ 0 赞/ 345 阅读

相关 HTML5中canvas画图之画矩形和矩形掏空

rect方法用于绘制矩形（长方形）。其语法如下: context.rect(x，y，高度，宽度); 绘制代码如下: <!DOCTYPE html> <ht

不念不忘少年蓝@/ 2022年08月23日 05:51/ 0 赞/ 197 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 196 阅读

相关 HTML5中canvas画图之根据触摸点画三角形

上一篇博文中说了利用canvas画固定的三角形，现在来试下触摸屏幕，然后根据触摸点画三角形。每触摸一下屏幕就画一个点。刚刚我醉死了，绘制路径的时候竟然把后面的lineTo写成了

谁借莪１个温暖的怀抱￠/ 2022年08月23日 05:50/ 0 赞/ 163 阅读

相关 HTML5中canvas画图之绘制路径

刚开始认真学习H5，虽然以前大概看过H5的教程，但是都是属于空看，一直没有认真练习，所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。

待我称王封你为后i/ 2022年08月23日 05:49/ 0 赞/ 209 阅读

相关【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图： ![1334153306_3907.png][]

喜欢ヅ旅行/ 2022年06月13日 11:30/ 0 赞/ 215 阅读