Changes for page Nixie Spritesheet
Last modified by Victor Zhang on 00:34, 22/07/2020
Change comment: There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -11,26 +11,33 @@ 11 11 |Rendered using Perspective Camera|[[image:NixiePers.png]] 12 12 ))) 13 13 * Phaser P5 not working somehow needs investigate 14 +* Somehow can only use raw API 14 14 15 15 {{html clean="false"}} 16 16 <div id="canvasparent"> 17 - <canvas id="mycanvas" width=" 800" height="600">18 + <canvas id="mycanvas" width="600" height="300"> 18 18 </canvas> 19 19 </div> 20 20 <script> 22 +let windowurl = window.location.href; 21 21 setTimeout( () => { 22 22 let c = document.getElementById("mycanvas"); 23 23 let ctx = c.getContext("2d"); 24 24 25 - ctx.fillStyle = "red"; 26 - ctx.fillRect(20, 20, 75, 50); 27 + let imgurls = [windowurl + '/']; 27 27 28 - //Turn transparency on 29 - ctx.globalAlpha = 0.2; 30 - ctx.fillStyle = "blue"; 31 - ctx.fillRect(50, 50, 75, 50); 32 - ctx.fillStyle = "green"; 33 - ctx.fillRect(80, 80, 75, 50); 29 + console.log( "Load image:", windowurl ); 30 + console.log( "canvas size:",c.width, ",", c.height ); 31 + let scrwidth = c.width; 32 + let scrheight = c.height; 33 + let borderwidth = 2; 34 + 35 + // Draw a border 36 + ctx.beginPath(); 37 + ctx.lineWidth = ""+borderwidth; 38 + ctx.strokeStyle = "#ffffff"; 39 + ctx.rect(borderwidth / 2, borderwidth / 2, scrwidth - borderwidth, scrheight - borderwidth); 40 + ctx.stroke(); 34 34 }, 1000 ); 35 35 </script> 36 36 {{/html}}