DIR : /home/kozerus/public_html/go/konva0_20211210_0030.html
/home/kozerus/public_html/go
<html>
<head>
<!-- <script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script> -->
<script src="/go/js/konva_min.js"></script>
<meta charset="utf-8" />
<title>ko 20211209_1230 konva14 dd collision detection</title>
<body bgcolor=linen onload="startup_konva0('onload');return false;">
<hr color=goldenrod>
<div id=div_konva0>
<h1>div_konva0</h1>
<h2>konva0 20211210_0000</h2>
<img src=/imgs/btn/koeye.png onclick="startup_konva0('click');return false;" height=50>
<hr color=goldenrod>
<div id=container_collision><h1>container_collision</h1></div>
<div id=div_container><h1>div_container</h2></div>
<div id=container><h1>container</h2></div>
<hr color=goldenrod>
</div>
<hr color=goldenrod>
<script id=script_startup>
function startup_konva0(args) {
// alert( "BUGS_101 startup_konva0 args="+args );
return;
}
</script>
<script id=script_konva0>
var width = window.innerWidth;
var height = window.innerHeight;
// url_width = geturlvars()['w'];
// url_height = geturlvars()['h'];
// if( url_width != undefined ) { width=url_width; }
// if( url_height != undefined ) { height=url_height; }
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
// var layer = new Konva.Layer();
// then create layer
// var layer = new Konva.Layer();
// create our shape
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
// add the shape to the layer
// add the layer to the stage
// draw the image
// layer.add(circle);
// stage.add(layer);
// layer.draw();
var triangle = new Konva.Shape({
sceneFunc: function(context) {
context.beginPath();
context.moveTo(20, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(150, 100, 260, 170);
context.closePath();
// special Konva.js method
context.fillStrokeShape(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4
});
var pentagon = new Konva.RegularPolygon({
x: (stage.width() / 2) +100,
y: (stage.height() / 2) +100,
sides: 5,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
shadowOffsetX : 20,
shadowOffsetY : 25,
shadowBlur : 40,
opacity : 0.5
});
layer.add(circle);
layer.add(triangle);
layer.add(pentagon);
stage.add(layer);
layer.draw();
</script>
</head>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer