i having trouble placing div on canvas canvas still visible. can div on canvas canvas hidden. if has example lovely.
var canvas = document.queryselector('canvas'); canvas.width = screen.width; canvas.height = screen.height; var context = canvas.getcontext('2d'); var tau = 2 * math.pi; function triangle(canvs, cnt, sid, f) { this.phase = 0; this.ctx = canvs.getcontext('2d'); this.first = f; this.sides = sid; this.canv = canvs; this.draw = drawtriangle; this.size = 100; } function drawtriangle() { requestanimationframe(drawtriangle.bind(this)); var x = 0; var y = 0; var centerx = this.canv.width / 2; var centery = this.canv.height / 4; this.phase += 0.005 * tau; if (this.first == 1) { this.ctx.clearrect(0, 0, this.canv.width, this.canv.height); } this.ctx.beginpath(); (var = 0; <= this.sides; i++) { this.ctx[i ? 'lineto' : 'moveto']( centerx + this.size * math.cos(this.phase + / this.sides * tau), centery + this.size * math.sin(this.phase + / this.sides * tau) ); } this.ctx.strokestyle = '#dda36b'; this.ctx.stroke(); this.size--; } var collection = []; var triangle1 = new triangle(canvas, context, 3, 1); triangle1.draw(); var = 0; function nextframe() { if (i < 1000) { collection[i] = new triangle(canvas, context, 3, 0); collection[i].draw(); i++; settimeout(nextframe, 500); } } settimeout(nextframe, 0);body { background-color: #19191b }<div align="center"> <button id="test">test button needed text make longer</button> <br> </div> <div> <canvas></canvas> </div>so button takes entire width of screen , cannot see beneath it. div transparent can see triangles beneath it.
use position:absolute can freely position elements in parent element top or bottom , left or right. allows html elements overlap. make sure elements want in foreground come after want in background (or alternatively, use z-index css property).
this code modified faster results. did not change of matter in js section (just removed resizing code demonstrated behavior visible sooner). interesting changes css , html below.
var canvas = document.queryselector('.mycanvas'); var context = canvas.getcontext('2d'); var tau = 2 * math.pi; function triangle(canvs, cnt, sid, f) { this.phase = 0; this.ctx = canvs.getcontext('2d'); this.first = f; this.sides = sid; this.canv = canvs; this.draw = drawtriangle; this.size = 100; } function drawtriangle() { requestanimationframe(drawtriangle.bind(this)); var x = 0; var y = 0; var centerx = this.canv.width / 2; var centery = this.canv.height / 4; this.phase += 0.005 * tau; if (this.first == 1) { this.ctx.clearrect(0, 0, this.canv.width, this.canv.height); } this.ctx.beginpath(); (var = 0; <= this.sides; i++) { this.ctx[i ? 'lineto' : 'moveto']( centerx + this.size * math.cos(this.phase + / this.sides * tau), centery + this.size * math.sin(this.phase + / this.sides * tau) ); } this.ctx.strokestyle = '#dda36b'; this.ctx.stroke(); this.size--; } var collection = []; var triangle1 = new triangle(canvas, context, 3, 1); triangle1.draw(); var = 0; function nextframe() { if (i < 1000) { collection[i] = new triangle(canvas, context, 3, 0); collection[i].draw(); i++; settimeout(nextframe, 500); } } settimeout(nextframe, 0);.mycanvas { position:absolute; background-color: #19191b } .mydiv { position:absolute; left:100px; top:30px; opacity:0.5; background-color: rgb(100, 100, 200); }<div> <div> <canvas class="mycanvas"></canvas> </div> <div class="mydiv"> hello world! </div> </div>
Comments
Post a Comment