Kanvas/Public/test/index.html

86 lines
3.0 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Kanvas - Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta charset="utf-8" />
<style data-type="text/css" data-language="CSS3" data-rel="stylesheet" charset="utf-8">
html,body{
height : 100%;
margin : 0px;
}
body{overflow : hidden;}
.kanvas{
position : absolute;
top : 0px;
left : 0px;
width : 100%;
height : 100%;
}
.fps{
position : absolute;
top : 0px;
right : 0px;
margin : 10px;
font-weight : 900;
}
</style>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/ecma/version/20230707/Kanvas.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
kanvas = new Kanvas({
position : "body",
quality : 1,
fps : 60
});
kanvas.map.push(
{type : "cache", name : "main_test", x : -20, y : -20, width : 40, height : 40, childs : [
{type : "image", url : "/data/test/hqdefault.jpg", x : -10, y : -10, width : 20, height : 20, cut_x : 100, cut_width : 100, rotate : -15},
{type : "rectangle", x : -2, y : -1, width : 4, height : 2, background : [0, 0, 4, 0, [
[0, "#F00"],
[1, "#00F"]
]], rotate : 45, border_color : "#00F", childs : [
{type : "rectangle", x : -.5, y : -.5, width : 1, height : 1, background : "#F88", rotate : -35, margin_x : 2, margin_y : 1}
]},
{type : "cache", name : "test_cache", childs : []}
]},
{type : "text", background : "#080", border_color : "#F00", text : "Hola, esto es una prueba xD", x : 20, y : 20, size : 5, baseline : "bottom", align : "right", shadow : [
[0, 0, 5, "#000"],
[1, 1, 2, "#800"]
]}
);
with(kanvas.map[1]){
align = "left";
baseline = "top";
};
kanvas.on_ready.add(() => {
kanvas.threads_add(() => kanvas.map[1].text = kanvas.get_real_fps().toFixed(2));
kanvas.on_screen_change.add(() => {
console.log("PASA");
with(kanvas.map[1]){
x = -kanvas.cells_x;
y = -kanvas.cells_y;
};
});
});
</script>
</head>
<body></body>
</html>