added grid settings
This commit is contained in:
parent
4cfc67d416
commit
b63d6ce4f1
@ -8,7 +8,6 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="links/main.css"/>
|
<link rel="stylesheet" type="text/css" href="links/main.css"/>
|
||||||
<title>Dotgrid(Interface)</title>
|
<title>Dotgrid(Interface)</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<body>
|
<body>
|
||||||
<pre class="reference">
|
<pre class="reference">
|
||||||
q <b>CLEAR</b>
|
q <b>CLEAR</b>
|
||||||
@ -26,18 +25,34 @@
|
|||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<pre class="settings">
|
<pre class="settings">
|
||||||
<b>THICKNESS</b> <input type="number" value=1 min="0" step="0.1"
|
<b>THICKNESS</b> <input id="thickness" type="number" value=5 min="0" step="0.1"
|
||||||
oninput="dotgrid.update_style('strokeWidth', this.value);">
|
oninput="dotgrid.update_style('strokeWidth', this.value);">
|
||||||
<b>LINECAP</b> <select
|
<b>LINECAP</b> <select id="linecap"
|
||||||
onchange="dotgrid.update_style('strokeLinecap', this.value);">
|
onchange="dotgrid.update_style('strokeLinecap', this.value);">
|
||||||
<option value="butt">butt</option>
|
<option value="butt">butt</option>
|
||||||
<option value="round">round</option>
|
<option value="round">round</option>
|
||||||
<option value="square">square</option>
|
<option value="square">square</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
|
||||||
|
<b>WIDTH</b> <input id="width" type="number" value="490" min="1" step="1">
|
||||||
|
<b>HEIGHT</b> <input id="height" type="number" value="490" min="1" step="1">
|
||||||
|
<b>GRID</b> <input id="grid" type="number" value="10" min="5" step="1">
|
||||||
|
<b>BLOCK</b> <input id="block" type="number" value="6" min="0" step="1">
|
||||||
|
<button onclick="document.body.removeChild(document.getElementById('dotgrid')); dotgrid = new_grid(); dotgrid.install();">NEW GRID</button>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
dotgrid = new Dotgrid(320,568,31,61,6,6, 1,"square","#000000");
|
var new_grid = function() { return new Dotgrid(document.getElementById('width').value,
|
||||||
|
document.getElementById('height').value,
|
||||||
|
Math.round( document.getElementById('width').value / document.getElementById('grid').value ),
|
||||||
|
Math.round( document.getElementById('height').value / document.getElementById('grid').value ),
|
||||||
|
document.getElementById('block').value,
|
||||||
|
document.getElementById('block').value,
|
||||||
|
document.getElementById('thickness').value,
|
||||||
|
document.getElementById('linecap').value,
|
||||||
|
"#000000"); };
|
||||||
|
dotgrid = new_grid();
|
||||||
dotgrid.install();
|
dotgrid.install();
|
||||||
var keyboard = new Keyboard();
|
var keyboard = new Keyboard();
|
||||||
document.onkeyup = function myFunction(event){ keyboard.listen(event); };
|
document.onkeyup = function myFunction(event){ keyboard.listen(event); };
|
||||||
|
Loading…
Reference in New Issue
Block a user