-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdom.html
51 lines (45 loc) · 1.36 KB
/
dom.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Renderer</title>
</head>
<body>
<textarea autofocus spellcheck="false" id="input" oninput="update()"
onpropertychange="update()"></textarea>
<br><br>
<canvas id="canvas"></canvas>
<script>
function update() {
var input = document.getElementById('input').value;
input = input.replace('Query commands should not be inserted in\nscripts\n', '' )
.replace(' = (', '')
.replace(')\n : Z * Z * list (Z * Z * color)', '')
.replace(/None_c/g, 'Rgb 128 128 128')
.replace(/\(/g, '"')
.replace(/\)/g, '"')
.replace(/;/g, ',')
console.log(input);
input = JSON.parse('[' + input + ']');
var canvas = document.getElementById('canvas');
canvas.width = input[0];
canvas.height = input[1];
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var pixels = input[2];
for (var i = 0; i < pixels.length; i++) {
// x y 'Rgb' r g b a
var components = pixels[i].split(',').join('').split(' ');
var x = components[0];
var y = components[1];
var r = components[3];
var g = components[4];
var b = components[5];
var a = components[6];
ctx.fillStyle = 'rgb(' + r + ', ' + g + ', ' + b + ')'
ctx.fillRect(x, y, 1, 1);
}
}
</script>
</body>
</html>