1
0
mirror of https://shylinux.com/x/ContextOS synced 2025-04-26 09:14:06 +08:00
ContextOS/usr/wiki/html5.js
2018-09-01 16:16:07 +08:00

633 lines
16 KiB
JavaScript

var canvas = document.getElementById("heart");//{{{
var ctx = canvas.getContext('2d');
var main_angle = 30;
function refreshHeart() {
ctx.clearRect(0,0,400,400)
drawHeart(ctx,200,200,60,main_angle);
main_angle += 10;
for (var i = 0; i < 10; i++) {
var x = Math.random() * 400;
var y = Math.random() * 400;
var scale = Math.random() * 20+10;
var angle = Math.random() * 360;
drawHeart(ctx,x,y,scale,angle);
}
setTimeout(refreshHeart, 200);
}
setTimeout(refreshHeart, 200);
function drawHeart(ctx,x,y,scale,angle, style, stroke) {//{{{
ctx.save();
ctx.translate(x,y);
ctx.rotate(angle/180*Math.PI);
ctx.scale(scale, scale);
heartPath(ctx);
ctx.shadowColor = "gray";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
if (stroke == "stroke") {
ctx.strokeStyle = style||"red";
ctx.stroke();
} else {
ctx.fillStyle = style||"red";
ctx.fill();
}
ctx.restore();
}
//}}}
function heartPath(ctx) {//{{{
ctx.beginPath();
ctx.arc(-1,0,1,Math.PI,0,false);
ctx.arc(1,0,1,Math.PI,0,false);
ctx.bezierCurveTo(1.9, 1.2, 0.6, 1.6, 0, 3.0);
ctx.bezierCurveTo( -0.6, 1.6,-1.9, 1.2,-2,0);
ctx.closePath();
}
//}}}
var ctx0 = document.getElementById("demo0").getContext("2d");
ctx0.fillStyle = "green";
ctx0.fillRect(10,10,100,100);
var ctx2 = document.getElementById("demo2").getContext("2d");
ctx2.beginPath();
ctx2.moveTo(60,10);
ctx2.lineTo(10,110);
ctx2.lineTo(110,110);
ctx2.fill();
function draw3() {
for (var i = 0; i < 120; i+=20) {
for (var j = 0; j < 120; j+=20) {
r = Math.random()*255;
g = Math.random()*255;
b = Math.random()*255;
ctx3.fillStyle = "rgb("+r+","+g+","+b+")";
ctx3.fillRect(i, j, 20, 20);
}
}
}
var demo3 = document.getElementById("demo3");
var ctx3 = demo3.getContext("2d");
demo3.onclick = draw3;
draw3()
//}}}
var draw_history = [{shape:"clear"}];
var his = document.getElementById("draw_history");
var draw = document.getElementById("draw").getContext("2d");
var current_ctx = {//{{{
agent: {},
big_scale: 1.25,
small_scale: 0.8,
font: '32px sans-serif',
index_point: false,
begin_point: null,
end_point: null,
config: {
shape: {value: "rect", list: [
{text: "心形", value: "heart"},
{text: "圆形", value: "cycle"},
{text: "矩形", value: "rect"},
{text: "直线", value: "line"},
{text: "文字", value: "text"},
]},
stroke: {value: "stroke", list: [
{text: "画笔", value: "stroke"},
{text: "画刷", value: "fill"},
]},
color: {value: "green", list: [
{text: "黑色", value: "black"},
{text: "红色", value: "red"},
{text: "黄色", value: "yellow"},
{text: "绿色", value: "green"},
{text: "蓝色", value: "blue"},
{text: "紫色", value: "purple"},
{text: "白色", value: "white"},
]},
scale: {text: "比例", value: 1},
point: {text: "坐标", value: "0,0"},
begin: {text: "隐藏", value: 0},
interval: {text: "间隔", value: 100},
json: {text: "数据", value: ""},
},
command: {
cmd_shape: {
heart: {text: "心形", key: "e",
conf:{"shape": "heart", "stroke": "fill"},
cmd:{"fill": "cmd_stroke"},
},
cycle: {text: "圆形", key: "c", conf:{"shape": "cycle"}},
rect: {text: "矩形", key: "r", conf:{"shape": "rect"}},
line: {text: "直线", key: "v",
conf:{"shape": "line", "stroke": "stroke"},
cmd:{"stroke": "cmd_stroke"},
},
text: {text: "文字", key: "t",
conf:{"shape": "text", "stroke": "fill"},
cmd:{"fill": "cmd_stroke"},
},
},
cmd_stroke: {
stroke: {text: "画笔", key: "s", conf:{"stroke": "stroke"}},
fill: {text: "画刷", key: "f", conf:{"stroke": "fill"}},
},
cmd_color: {
black: {text: "黑色", key: "", conf:{"color": "black"}},
red: {text: "红色", key: "", conf:{"color": "red"}},
yellow: {text: "黄色", key: "", conf:{"color": "yellow"}},
green: {text: "绿色", key: "", conf:{"color": "green"}},
purple: {text: "紫色", key: "", conf:{"color": "purple"}},
blue: {text: "蓝色", key: "", conf:{"color": "blue"}},
white: {text: "白色", key: "", conf:{"color": "white"}},
},
ctrl_status: {
shape: {type: "config"},
stroke: {type: "config"},
color: {type: "config"},
scale: {type: "cache"},
begin: {type: "cache"},
point: {type: "cache"},
},
ctrl_show: {
big: {text: "放大", key: "b"},
small: {text: "缩小", key: "m"},
hide: {text: "隐藏"},
show: {text: "恢复"},
play: {text: "播放", key: "a"},
interval: {type: "config", width: 30},
},
ctrl_data: {
delete: {text: "删除", key: "d"},
clear: {text: "清空", key: "q"},
export: {text: "导出"},
import: {text: "导入"},
json: {type: "config", width: 80},
}
},
}
//}}}
function init(configs, commands) {//{{{
current_ctx.agent.isChrome = window.navigator.userAgent.indexOf("Chrome")>-1;
current_ctx.agent.isMobile = window.navigator.userAgent.indexOf("Mobile")>-1;
for (var group in commands) {
var cs = document.getElementsByClassName(group+" bar");
for (var i = 0; i < cs.length; i++) {
for (var which in commands[group]) {
var command = commands[group][which];
var config = configs[which];
if (command.type == "cache") {
var label = cs[i].appendChild(document.createElement("label"));
label.innerText = config.text+": ";
var label = cs[i].appendChild(document.createElement("label"));
label.innerText = config.value;
label.className = "config "+which;
} else if (command.type == "config") {
if (config.list) {
var select = cs[i].appendChild(document.createElement("select"));
select.className = "config "+which;
for (var j in config.list) {
var item = config.list[j];
var option = select.appendChild(document.createElement("option"));
option.value = item.value;
option.text = item.text;
if (config.value == item.value) {
select.selectedIndex = j
}
}
(function() {
var key = which;
select.onchange = function(event) {
conf('config', key, event);
}
})();
} else {
var label = cs[i].appendChild(document.createElement("label"));
label.innerText = config.text+": ";
var input = cs[i].appendChild(document.createElement("input"));
input.style.width = command.width+"px";
input.value = config.value;
input.className = "config "+which;
(function() {
var key = which;
input.onkeyup = input.onblur = function(event) {
conf('config', key, event);
}
})();
}
} else {
var cmd = cs[i].appendChild(document.createElement("button"));
cmd.className = group+" "+which;
if (command.key) {
cmd.innerText = command.text+"("+command.key+")";
} else {
cmd.innerText = command.text
}
(function() {
var key = which;
var key1 = group;
cmd.onclick = function(event) {
action(event, key, key1);
}
})();
}
}
}
}
}//}}}
function conf(group, which, value) {//{{{
if (value instanceof Event) {
var event = value;
switch (event.type) {
case "change":
current_ctx[group][which].value = event.target[event.target.selectedIndex].value;
break
case "keyup":
switch (event.key) {
case "Enter":
current_ctx[group][which].value = event.target.value;
break
case "Escape":
event.target.value = current_ctx[group][which].value;
break
}
break
case "blur":
current_ctx[group][which].value = event.target.value;
break
}
return
}
var config = current_ctx[group][which];
if (value != undefined) {
var cs = document.getElementsByClassName(group+" "+which);
for (var i = 0; i < cs.length; i++) {
config.value = value;
if (cs[i].nodeName == "LABEL") {
cs[i].innerText = value;
} else {
cs[i].value = value;
}
}
}
return config.value
}//}}}
function info() {//{{{
var list = []
for (var i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == "object") {
list.push("{")
for (var k in arguments[i]) {
list.push(k+": "+arguments[i][k]+",")
}
list.push("}")
} else {
list.push(arguments[i])
}
}
debug_info = document.getElementsByClassName("debug_info");
for (var i = 0; i < debug_info.length; i++) {
var p = debug_info[i].appendChild(document.createElement("p"));
p.appendChild(document.createTextNode(list.join(" ")));
debug_info[i].scrollTop+=100;
}
}
//}}}
init(current_ctx.config, current_ctx.command);
var control_map = {//{{{
s: "stroke",
f: "fill",
e: "heart",
c: "cycle",
r: "rect",
v: "line",
t: "text",
d: "delete",
b: "big",
m: "small",
a: "play",
Escape: "escape",
action: {
"escape": [function() {
current_ctx.begin_point = null;
current_ctx.end_point = null;
}],
"big": [function(){
conf("config", "scale", (conf("config", "scale")*current_ctx.big_scale).toFixed(3));
draw.scale(current_ctx.big_scale, current_ctx.big_scale);
}],
"small": [function(){
conf("config", "scale", (conf("config", "scale")*current_ctx.small_scale).toFixed(3));
draw.scale(current_ctx.small_scale, current_ctx.small_scale);
}],
"hide": [function() {
conf("config", "begin", draw_history.length);
}],
"show": [function() {
conf("config", "begin", 0);
}],
"play": [function() {
conf("config", "begin", 0);
refresh(conf("config", "interval"), 0);
return false
}],
"delete": [function() {
if (draw_history.length > 1) {
draw_history.pop();
var tr = his.rows[his.rows.length-1];
tr.parentElement.removeChild(tr)
}
}],
"clear": [function() {
if (confirm("clear all?")) {
draw_history.length = 1;
var th = his.rows[0];
his.innerHTML = "";
his.appendChild(th);
}
}],
"export": [function() {
conf("config", "json", JSON.stringify(draw_history));
return false
}],
"import": [function() {
draw_history = JSON.parse(conf("config", "json"));
}],
"default": [function(event, which, group) {
if (!which || !group) {
return false
}
var cs = document.getElementsByClassName(group);
for (var i = 0; i < cs.length; i++) {
cs[i].style.backgroundColor = "white";
}
var cs = document.getElementsByClassName(group+" "+which);
for (var i = 0; i < cs.length; i++) {
cs[i].style.backgroundColor = "lightblue";
}
var command = current_ctx.command[group][which];
if (!command) {
return false
}
for (var k in command.conf) {
conf("config", k, command.conf[k]);
}
for (var k in command.cmd) {
action(event, k, command.cmd[k])
}
}],
}
}
//}}}
function control(event) {//{{{
if (event.type == "keyup") {
action(event, control_map[event.key]);
}
}
//}}}
function action(event, which, group) {//{{{
var w = control_map.action[which]? which: "default";
while (control_map.action[w]) {
for (var i in control_map.action[w]) {
var next = control_map.action[w][i](event, which, group);
w = next || w;
}
w = next;
if (next == undefined) {
refresh()
}
}
}
//}}}
action(null, "heart", "cmd_shape");
action(null, "red", "cmd_color");
function trans(point) {//{{{
point.x /= conf("config", "scale");
point.y /= conf("config", "scale");
return point;
}
//}}}
function draw_point(event) {//{{{
var point = trans({
x: event.type == "touchstart"? event.touches[0].clientX: event.offsetX,
y: event.type == "touchstart"? event.touches[0].clientY: event.offsetY,
});
if (!current_ctx.begin_point) {
current_ctx.begin_point = point;
info(event.type, "begin_point", current_ctx.begin_point)
return
}
current_ctx.end_point = point;
info(event.type, "end_point", current_ctx.end_point)
var s = {
color:conf("config", "color"),
stroke:conf("config", "stroke"),
shape:conf("config", "shape"),
begin_point:current_ctx.begin_point,
end_point:current_ctx.end_point,
text:conf("config", "shape") == "text"? prompt("请入文字", ""): "",
};
draws(draw, s);
add_history(his, s);
current_ctx.begin_point = null;
current_ctx.end_point = null;
}
//}}}
function draw_move(event) {//{{{
if (current_ctx.agent.isMobile) {
return
}
if (current_ctx.begin_point) {
var point = trans({x:event.offsetX, y:event.offsetY});
conf("config", "point", parseInt(point.x)+","+parseInt(point.y));
info(event.type, "move_point", point)
refresh();
draws(draw, {
color:conf("config", "color"),
stroke:conf("config", "stroke"),
shape:conf("config", "shape"),
begin_point:current_ctx.begin_point,
end_point:point,
text:"",
});
}
}
//}}}
function add_history(his, s) {//{{{
draw_history.push(s);
var headers = ["color", "stroke", "shape", "x1", "y1", "x2", "y2", "text"]
if (his.rows.length == 0) {
var tr = his.insertRow(-1);
for (var i in headers) {
var th = tr.appendChild(document.createElement("th"));
th.appendChild(document.createTextNode(headers[i]))
}
}
var tr = his.insertRow(-1);
var fields = [s.color, s.stroke, s.shape,
parseInt(s.begin_point.x), parseInt(s.begin_point.y),
parseInt(s.end_point.x), parseInt(s.end_point.y), s.text]
for (var i in fields) {
var td = tr.appendChild(document.createElement("td"));
switch (headers[i]) {
case "color":
case "stroke":
case "shape":
var select = td.appendChild(document.createElement("select"));
var list = current_ctx.config[headers[i]].list;
for (var j in list) {
var option = select.appendChild(document.createElement("option"));
option.value = list[j].value;
option.text = list[j].text;
if (option.value == fields[i]) {
select.selectedIndex = j;
}
}
(function() {
var index = headers[i];
select.onchange = function(event) {
draw_history[tr.rowIndex][index] = event.target[event.target.selectedIndex].value;
refresh();
}
})();
break
default:
var input = td.appendChild(document.createElement("input"));
input.value = fields[i];
input.style.width="40px";
(function() {
var row = draw_history[tr.rowIndex]
var col = headers[i]
input.onblur = input.onkeyup = function(event) {
if (event.key && event.key != "Enter") {
return
}
var value = event.target.value;
switch (col) {
case "x1":
row.begin_point.x = value;
break
case "y1":
row.begin_point.y = value;
break
case "x2":
row.end_point.x = value;
break
case "y2":
row.end_point.y = value;
break
default:
row[data.col] = value;
}
refresh()
}
})()
}
}
}
//}}}
function refresh(time, i) {//{{{
if (time) {
if (i < draw_history.length) {
draws(draw, draw_history[i++]);
setTimeout(function(){refresh(time, i)}, time);
}
return
}
for (var i = conf("config", "begin"); i < draw_history.length; i++) {
draws(draw, draw_history[i]);
}
}
//}}}
function draws(draw, h) {//{{{
draw.save();
if (h.shape == "clear") {
draw.clearRect(0, 0,400/conf("config", "scale"), 400/conf("config", "scale"));
draw.restore();
return
}
var begin_x = h.begin_point.x;
var begin_y = h.begin_point.y;
var end_x = h.end_point.x;
var end_y = h.end_point.y;
if (h.color) {
if (h.stroke == "stroke") {
draw.strokeStyle = h.color;
} else {
draw.fillStyle = h.color;
}
}
info("draw", h)
switch (h.shape) {
case 'heart':
r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
a = Math.atan((end_y-begin_y)/(end_x-begin_x))/Math.PI*180;
drawHeart(draw, begin_x, begin_y, r, a, h.color, h.stroke)
break
case 'cycle':
draw.beginPath();
r = Math.sqrt(Math.pow(begin_x-end_x, 2)+Math.pow(begin_y-end_y,2));
draw.arc(begin_x, begin_y, r, 0, 2*Math.PI)
draw[h.stroke]()
break
case 'line':
draw.beginPath();
draw.moveTo(begin_x, begin_y);
draw.lineTo(end_x, end_y);
draw[h.stroke]()
break
case 'rect':
draw[h.stroke+"Rect"](begin_x, begin_y, end_x-begin_x, end_y-begin_y);
break
case 'text':
draw.font = current_ctx.font;
draw[h.stroke+"Text"](h.text, begin_x, begin_y, end_x-begin_x);
}
draw.restore();
}
//}}}