html5 및 (canvas 또는 svg)를 사용하여 그리드를 그리는 방법
이미지와 같이 격자를 그리고 싶지만 어디서부터 시작해야할지 전혀 모르겠습니다. SVG를 사용해야할까요 아니면 HTML5 와 함께 Canvas 를 사용해야할까요? 이것에 대해 안내하십시오. 이 그리드가 사각형, 원 또는 기타 다이어그램을 그리도록하고 사각형의 면적과 같은 다이어그램의 면적을 계산합니다.
SVG는 패턴을 사용하여이를 잘 수행 할 수 있습니다.
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
width및 height로 설정 100%했으므로 인라인 SVG에 대해 사용할 실제 너비와 높이를 정의 할 수 있습니다.
<div style="width:400px;height:300px">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="url(#smallGrid)"/>
<path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>
또는 <img>요소 :
<img src="https://svgshare.com/i/9Eo.svg" width="700" height="200"/>
결과 :
<img src="https://svgshare.com/i/9Eo.svg" width="241" height="401"/>
결과
이 특정 그리드의 경우 그리드가 두꺼운 획으로 시작하고 끝나도록 하려면 양식의 너비와 높이 n x 80 + 1( n정수 포함)를 사용해야합니다.
canvas여기에 사용하여 코드를 게시하고 있지만 여기 에서 JSFiddle에 대한 작업 샘플도 만들고 있습니다 .
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow test bed</title>
<script type="text/javascript">
function drawGrid() {
var cnv = document.getElementById("cnv");
var gridOptions = {
minorLines: {
separation: 5,
color: '#00FF00'
},
majorLines: {
separation: 30,
color: '#FF0000'
}
};
drawGridLines(cnv, gridOptions.minorLines);
drawGridLines(cnv, gridOptions.majorLines);
return;
}
function drawGridLines(cnv, lineOptions) {
var iWidth = cnv.width;
var iHeight = cnv.height;
var ctx = cnv.getContext('2d');
ctx.strokeStyle = lineOptions.color;
ctx.strokeWidth = 1;
ctx.beginPath();
var iCount = null;
var i = null;
var x = null;
var y = null;
iCount = Math.floor(iWidth / lineOptions.separation);
for (i = 1; i <= iCount; i++) {
x = (i * lineOptions.separation);
ctx.moveTo(x, 0);
ctx.lineTo(x, iHeight);
ctx.stroke();
}
iCount = Math.floor(iHeight / lineOptions.separation);
for (i = 1; i <= iCount; i++) {
y = (i * lineOptions.separation);
ctx.moveTo(0, y);
ctx.lineTo(iWidth, y);
ctx.stroke();
}
ctx.closePath();
return;
}
</script>
</head>
<body onload="drawGrid()">
<canvas id="cnv" width="500" height="500"></canvas>
</body>
</html>
canvas접근 방식을 사용하면 separation매개 변수 를 변경하여 그리드 크기를 동적으로 만들 수 있습니다 .
그러나 귀하의 격자 크기가 될 것입니다 경우 정적 있음을 나는 느낌 , 어쩌면 당신이 할 필요가 없습니다 그릴 격자를. 사용자에게 그리드를 표시하기 위해 CSS를 사용하여 여기 바이올린에서 설명한대로 배경 이미지를 반복 할 수 있습니다 . 그것은 또한 페이지 성능에 좋을 것입니다.
커버리지 측면에서 CSS 기반 접근 방식은 어떻습니까?
<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background-color: #434343;
background-size: 75px 75px;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
}
canvas {
width:100%;
height:100%;
position:absolute;
background-color: transparent;
background-size: 15px 15px;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>
캔버스를 사용하는 것은 매우 쉽습니다. 그것이 제가 권장하는 것입니다. 여기에서 모바일로 신속하게 응답하고 있지만 아래의 유사 코드가 정확하지 않더라도 아이디어를 얻을 수 있습니다.
다음과 같은 루프가 있습니다.
// "Ctx" is your canvas context
// "Width," "Height," and other vars that start with a capital letter are set according
// to your canvas size or preference
var i;
for (i=0; i < Height; i += GridSize) {
ctx.lineWidth(1.0+((i%10)==0));
ctx.moveTo(0,i);
ctx.lineTo(Width,i);
ctx.stroke();
}
for (i=0; i < Width; i += GridSize) {
ctx.lineWidth(1.0+((i%10)==0));
ctx.moveTo(i,0);
ctx.lineTo(i,Height);
ctx.stroke();
}
참고 URL : https://stackoverflow.com/questions/14208673/how-to-draw-grid-using-html5-and-canvas-or-svg
'IT박스' 카테고리의 다른 글
| “UseTaskFriendlySynchronizationContext”의 의미는 무엇입니까? (0) | 2020.11.21 |
|---|---|
| 두 조각 간의 기본 통신 (0) | 2020.11.20 |
| 지시어의 '터미널'을 이해하는 방법? (0) | 2020.11.20 |
| iOS의 NSURLErrorDomain 오류 코드 -999 (0) | 2020.11.20 |
| 반복자 대 (0) | 2020.11.20 |