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,34 +11,26 @@ 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 15 15 16 16 {{html clean="false"}} 17 17 <div id="canvasparent"> 18 - <canvas id="mycanvas" width=" 600" height="300">17 + <canvas id="mycanvas" width="800" height="600"> 19 19 </canvas> 20 20 </div> 21 21 <script> 22 -let windowurl = window.location.href; 23 -let attachurl = windowurl.substring(0, 47) + 'download' + windowurl.substring(51); 24 24 setTimeout( () => { 25 25 let c = document.getElementById("mycanvas"); 26 26 let ctx = c.getContext("2d"); 27 27 28 - let imgurls = [attachurl+'WebHome/NixieOrth.png', attachurl+'WebHome/NixiePers.png']; 25 + ctx.fillStyle = "red"; 26 + ctx.fillRect(20, 20, 75, 50); 29 29 30 - console.log( "Load image:", JSON.stringify(imgurls) ); 31 - console.log( "canvas size:",c.width, ",", c.height ); 32 - let scrwidth = c.width; 33 - let scrheight = c.height; 34 - let borderwidth = 2; 35 - 36 - // Draw a border 37 - ctx.beginPath(); 38 - ctx.lineWidth = ""+borderwidth; 39 - ctx.strokeStyle = "#ffffff"; 40 - ctx.rect(borderwidth / 2, borderwidth / 2, scrwidth - borderwidth, scrheight - borderwidth); 41 - ctx.stroke(); 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); 42 42 }, 1000 ); 43 43 </script> 44 44 {{/html}}