html使用canvas，svg绘制方格，并在方格上放圆点

最新推荐文章于 2024-05-10 12:42:21 发布

杨树叶子0526

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量496

点赞数

分类专栏：前端相关代码记录文章标签： html 前端

本文链接：https://blog.csdn.net/qq_38360823/article/details/131722199

版权

前端相关代码记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、绘制canvas图

1、html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<link href="css/index-canvas.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div id="container">
			<div id="title-container">canvas(非矢量图)</div>
			<canvas id="myCanvas"/>
		</div>
	</body>
	
	<script type="text/javascript">
		//获取上下文
		var canvas=document.getElementById("myCanvas");
		var cxt=canvas.getContext("2d");
		
		//获取canvas宽高（style内设置， clientWidth 含padding）
		var bodyWidth = canvas.clientWidth;
		var bodyHeight = canvas.clientHeight;
		//设置canvas宽高
		canvas.width = bodyWidth;
		canvas.height = bodyHeight;
		
		//设置列
		var cellNum = 10;
		//设置行
		var rowNum = 4;
		//偏移量
		var offiset = 20;
		//线条长度
		var xLineLength = (bodyWidth - offiset * 2);
		var yLineLength = (bodyHeight - offiset * 2);
		
		//单元格宽高
		var cellWidth = xLineLength / cellNum;
		var cellHeight = yLineLength / rowNum;
		
		//绘制方格
		for(var row=0; row<=rowNum; row++) {
			//绘制行线
			var y = row * cellHeight + offiset;
			cxt.moveTo(offiset, y);
			cxt.lineTo(xLineLength+offiset, y);
		}
		var xData = [];
		for(var cell=0; cell<=cellNum; cell++) {
			//绘制列线
			var x = cell * cellWidth + offiset;
			xData[cell] = x;
			cxt.moveTo(x, offiset);
			//lineLength + offiset: 获取终点位置
			cxt.lineTo(x, yLineLength+offiset);
		}
		//线条
		cxt.lineWidth=1;
		cxt.strokeStyle="#c3c3c3";
		cxt.stroke();
		
		//绘制圆点
		var redData = [1, 2,, 4, 1];//红点
		var greenData = [3,0,,,,,2,,,4];//绿点
		for(var xIndex in xData) {
			var redNum = redData[xIndex];
			if(redNum >= 0) {
				createPointer(redNum, xIndex, 1);
			}
			var greenNum = greenData[xIndex];
			if(greenNum >= 0) {
				createPointer(greenNum, xIndex, 2);
			}
		}
		
		function createPointer(data, index, colorNum) {
			//绘制圆点
			cxt.beginPath();
			var pointerX = xData[index];
			var pointerY = data * cellHeight + offiset;
			
			// 创建渐变色：渐变开始圆x，渐变开始圆y，渐变开始圆r，渐变结束圆x，渐变结束圆y，渐变结束圆r
			var grd=cxt.createRadialGradient(pointerX,pointerY,5,pointerX,pointerY,21);
			var color = "black";
			if(colorNum == 1) {
				color = "red";
			} else if(colorNum == 2) {
				color = "green";
			}
			grd.addColorStop(0,color);
			grd.addColorStop(1,"white");
			cxt.fillStyle=grd;
			
			//线条
			cxt.strokeStyle="#fff";
			
			cxt.arc(pointerX,pointerY, 20, 0, 2*Math.PI);
			cxt.fill();//绘制，含颜色
			cxt.stroke();
		}
	</script>
</html>

2、css文件

* {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body{
	background-color: #333;
}
#container{
	position: relative;
	border: 3px solid #333;
	border-radius: 30px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	background-color: #fff;
}

#title-container{
	width: 100%;
	height: 80px;
	line-height: 80px;
	font-size: 3rem;
	text-align: center;
}
#myCanvas{
	width: calc(100% - 60px);
	height: calc(100% - 100px);
	margin-left: 30px;
}

3、效果

二、绘制svg图

1、html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/index-svg.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div id="container">
			<div id="title-container">svg(矢量图)</div>
			<svg  id="mySvg"></svg>
		</div>
	</body>
	
	<script type="text/javascript">
		var svg = document.getElementById("mySvg");
		//获取canvas宽高（style内设置， clientWidth 含padding）
		var bodyWidth = svg.clientWidth;
		var bodyHeight = svg.clientHeight;
		//设置列
		var cellNum = 10;
		//设置行
		var rowNum = 4;
		//偏移量
		var offiset = 20;
		
		//线条长度
		var xLineLength = (bodyWidth - offiset * 2);
		var yLineLength = (bodyHeight - offiset * 2);
		
		//单元格宽高
		var cellWidth = xLineLength / cellNum;
		var cellHeight = yLineLength / rowNum;
		
		var htmlText = ``;
		//绘制行
		for(var index=0; index <= rowNum; index++) {
			var xStart = offiset;
			var xEnd = xLineLength + offiset;
			var y = index * cellHeight + offiset;
			htmlText += `<line x1="${xStart}" y1="${y}" x2="${xEnd}" y2="${y}" style="stroke:#c3c3c3;stroke-width:1"/>`
		}
		//绘制列
		for(var index=0; index <= cellNum; index++) {
			var yStart = offiset;
			var yEnd = yLineLength + offiset;
			var x = index * cellWidth + offiset;
			htmlText += `<line x1="${x}" y1="${yStart}" x2="${x}" y2="${yEnd}" style="stroke:#c3c3c3;stroke-width:1"/>`
		}
		
		//圆点样式
		htmlText += `
			<defs>
				<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
				  <stop offset="0%" style="stop-color:red; stop-opacity:1" />
				  <stop offset="100%" style="stop-color:white;stop-opacity:1" />
				</radialGradient>
			</defs>
		`
		//绘制圆点，例： （1，1）（2，2）位置
		htmlText += `
			<circle cx="${cellWidth + offiset}" cy="${cellHeight + offiset}" r="20" stroke="black" stroke-width="0" fill="url(#grad1)"/>
			<circle cx="${cellWidth * 2 + offiset}" cy="${cellHeight * 2 + offiset}" r="20" stroke="black" stroke-width="0" fill="url(#grad1)"/>
		`
		//插入html
		svg.innerHTML = htmlText;
	</script>
</html>

2、css

* {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body{
	background-color: #333;
}
#container{
	position: relative;
	border: 3px solid #333;
	border-radius: 30px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	background-color: #fff;
}

#title-container{
	width: 100%;
	height: 80px;
	line-height: 80px;
	font-size: 3rem;
	text-align: center;
}
#mySvg{
	width: calc(100% - 60px);
	height: calc(100% - 100px);
	margin-left: 30px;
}

3、效果