-
Notifications
You must be signed in to change notification settings - Fork 1
/
js-canvas-trial.html
140 lines (126 loc) · 3.13 KB
/
js-canvas-trial.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Code1024 - JS-canvas-Trial</title>
</head>
<body>
<div>
<h4>主体代码</h4>
<p>
说明: <br />
参数: x, y;值为 0-1023 间(含)的整数<br />
返回: r, g, b, a;变量已初始化为 0,返回值应为 0-255 间(含)的整数<br />
</p>
<p>
<textarea id="code" rows="12" cols="120">
// sample code
var x0=x-512,y0=512-y,precision=1.41421;
if (y0==0 || x0==0
|| (y0%64 == 0 && x0 > 0 && x0 < 8)
|| (x0%64 == 0 && y0 > 0 && y0 < 8)
)
r=g=b=255;
if (Math.abs(y0 - x0*x0/512) < precision) r=255;
</textarea>
</p>
<p>
<input type="button" value="运行" onclick="run_code()" />
<span id="tips"></span>
</p>
</div>
<div>
<canvas id="canvas1024"></canvas>
</div>
<div id="func_tpl" style="display:none;">
function get_color_at(x, y) {
var r = 0, g = 0, b = 0, a = 0;
{{code}}
return [r, g, b, a];
}
</div>
<script type="text/javascript">
<!--
/**
* 获取指定点的颜色值: r,g,b,alpha
* 坐标范围: (0, 0) => (1023, 1023)
* 颜色值范围:均为 0 - 255
* 透明度: 0 - 255, 值越大越透明
*/
function get_color_at(x, y) {
var r = 0, g = 0, b = 0, a = 0;
// {{code start}}
// your code here
// {{code end}}
return [r, g, b, a];
}
/**
* 根据 id 获取元素
*/
function _id(elemId) {
return document.getElementById(elemId);
}
/**
* 在 canvas 上绘制图案
*/
function draw1024() {
var canvas = _id("canvas1024");
var width = 1024, height = 1024;
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
context.fillRect(0, 0, width, height);
var imgData = context.getImageData(0, 0, width, height);
var rgb, idx = 0;
for (y = 0; y < height; y++){
for (x = 0; x < width; x++){
rgb = get_color_at(x, y);
imgData.data[idx++] = rgb[0]&255;
imgData.data[idx++] = rgb[1]&255;
imgData.data[idx++] = rgb[2]&255;
imgData.data[idx++] = parseInt(255*(1-rgb[3]/255));
}
}
context.putImageData(imgData, 0, 0);
}
/**
* 运行代码,绘制 canvas
*/
function run_code() {
var oTips = _id('tips');
oTips.innerHTML = "开始运行~~";
var inputCode = _id('code').value;
var funcCode = _id('func_tpl').innerHTML.replace('{{code}}', inputCode);
runScript(funcCode);
oTips.innerHTML = "函数加载完成,开始绘制~~";
draw1024();
oTips.innerHTML = "绘制完毕!";
setTimeout(function() {
oTips.innerHTML = "";
}, 2000);
}
/**
* runScript
* 动态运行 js 代码
*/
function isIE() {
var client_pc = navigator.userAgent.toLowerCase();
return (client_pc.indexOf("msie") != -1) && (client_pc.indexOf("opera") == -1);
}
function runScript(code){
var elem = document.createElementNS ?
document.createElementNS('http://www.w3.org/1999/xhtml', "script") :
document.createElement("script");
elem.type = "text/javascript";
if( isIE() ){// IE
elem.text = code;
} else {
elem.appendChild((document.createTextNode(code)));
}
document.getElementsByTagName("head")[0].appendChild(elem);
}
//-->
</script>
</body>
</html>