59
グリッドをイメージに表示したいと思っていますが、どこから始めたらよいか分かりません。 SVGを使用するか、キャンバスとHTML5を使用する必要があります。
これにご案内ください。私はこのグリッドに矩形、円、または他の図を描きたいので、その図の面積を四角形のように計算します。html5と（キャンバスまたはsvg）を使用してグリッドを描画する方法
A
答えて
106
を素敵なパターンを使用して：
<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>
私は100%からwidthとheightを設定するので、あなたは、どちらかのインライン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://imgh.us/grid.svg" width="700" height="200"/>
結果：
で
<img src="https://imgh.us/grid.svg" width="241" height="401"/>
結果10
グリッドを太い線で始点と終点にしたい場合は、この特定のグリッドでは、n x 80 + 1（nは任意の整数）の幅と高さを使用する必要があります。
+0
グリッド線の間隔がどのくらい広いか、どの色、ストローク幅、背景色でより柔軟なグリッドが必要な場合はこれを簡単に行うこともできます。これ以上の助けが必要な場合はお気軽にお問い合わせください。 –
+0
私はこのソリューションが本当に好きです。しかし、FirefoxとSafariでは、svg getが本当に大きく（100％で設定し、実際に小さなビューポートを使用する）、小さなグリッドと大きなグリッドが完全に整列しない丸め誤差があるようです。http：// imgur.com/qitOro2にはこれを修正する方法がありますか？ –
+2
これは素晴らしいです – xxstevenxo
10
私はSOにここcanvasを使用して私のコードを投稿していますが、私はまたJSFiddle here上の作業のサンプルを作成しています。
<!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>
あなたがseparationパラメータを変更することで、グリッドのサイズを動的にすることができますcanvasアプローチを使用します。あなたのグリッドサイズが静的をあることを行っている場合
しかし、私はは多分あなたはする必要はありませんグリッドを描くことを感じています。ユーザにグリッドを表示するために、フィギュアhereで示されているように、CSSを使用して背景イメージを繰り返すことができます。それはまた、ページのパフォーマンスにも良いでしょう。
+0
これらの行のストローク幅を減らすことはできますか？私は1より小さい数字を使用しようとしました。上記のSVGの例ではうまくいきますが、このCanvasソリューションでは、SVGの鮮明さを再現できません。 – JohnDevelops
+1
キャンバスが線をレンダリングする方法が原因です。この記事http://www.mobtowers.com/html5-canvas-crisp-lines-every-time/を参照してください。 また、更新されたjsFiddleをお持ちですかhttp://jsfiddle.net/B2EBw/137/ –
4
キャンバスを使用するのはとても簡単ですが、それは私が推奨するものです。私はここで携帯に迅速に対応していますが、あなたは以下の擬似コードは正確に右でない場合であってもアイデアを得る必要があります。
あなたのようなループに何かがあります：SVGはこれを行うことができます
// "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();
}
4
カバレッジの観点から、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>
+1
上記の回答にjsfiddleを追加 - https://jsfiddle.net/3pfc4avp/ – Murukesh
関連する問題
- 1. HTML5キャンバス描画
- 2. キャンバス上にグリッド/テーブルを描画するHTML5
- 3. HTML5キャンバスでforループを使用して画像を描画しますか？
- 4. HTML5キャンバスにCSSスタイルでSVGを描く
- 5. HTMLペイントトライアングルツールをHTML5キャンバスとJavascriptを使って描画する
- 6. HTML5キャンバスを使用した描画パイプ/チューブ
- 7. キャンバスとsvgを使用して丸い四角形を描く方法は？
- 8. androidのデータベースデータを使用してキャンバスを描画する方法
- 9. SVGグラフィックスを使用してRGBカラーピッカーグラデーションを描画する方法
- 10. キャンバスとJavaScriptを使用して描画を移動する方法は？
- 11. キャンバスを使用した画像スライドショーHTML5
- 12. キャンバスにビデオを描画するHTML5
- 13. Html5キャンバスを再描画する
- 14. HTML5キャンバスをコンドミニアムに描画する
- 15. HTML5キャンバスで描画をアニメートする方法
- 16. HTML5キャンバスで円形のカラーピッカーを描画する方法
- 17. キャンバスにグリッドを描画して、データの入力を促す方法は？
- 18. キャンバスhtml5コンテキストに描画
- 19. HTML5キャンバスでの描画
- 20. HTML5キャンバスDrawImage描画イメージ
- 21. html5キャンバス描画/保存
- 22. HTMl5とキャンバスがIE9（またはFirefox！）に描画されない
- 23. C＃とXAMLを使用してメトロでキャンバスを描画する方法
- 24. HTML5キャンバスの描画と更新
- 25. HTML5キャンバスに描画するときにドロップシャドウを削除する方法
- 26. javascriptを使ってhtml5でキャンバスに絵を描く方法
- 27. Androidでキャンバスを使用して描画線を消去する方法は？
- 28. キャンバスやCSSを使用して図形を描画する方法は？
- 29. フィルタをHTML5キャンバスに実装したSVG
- 30. キャンバスを使用してカメラに合わせてグリッドを描く
グリッドを描画したいだけですか？私は他の方向に進んでいきたいとは思っていませんが、大きなグリッドを表示するために小さなグリッドイメージをバックグラウンドで繰り返すことができますか？もちろん、計算に基づいて描画したい場合は、 'canvas'を使う方がよいでしょう。 –