我想画一个网格如图所示,但我完全不知道我应该从哪里开始。应该使用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>
我将宽度和高度设置为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="http://imgh.us/grid.svg" width="700" height="200"/>
结果是:
<img src="http://imgh.us/grid.svg" width="241" height="401"/>
结果是
注意,对于这个特定的网格,你必须使用形式n x 80 1(n是任何整数)的宽度和高度,如果你想让网格以粗笔画开始和结束。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。