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,9 +11,34 @@ 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 -<script defer src="https://cdn.jsdelivr.net/npm/phaser@3.23.0/dist/phaser.js"></script> 17 +<div id="canvasparent"> 18 + <canvas id="mycanvas" width="600" height="300"> 19 + </canvas> 20 +</div> 17 17 <script> 22 +let windowurl = window.location.href; 23 +let attachurl = windowurl.substring(0, 46) + 'download' + windowurl.substring(50); 24 +setTimeout( () => { 25 + let c = document.getElementById("mycanvas"); 26 + let ctx = c.getContext("2d"); 27 + 28 + let imgurls = [attachurl+'WebHome/NixieOrth.png', attachurl+'WebHome/NixiePers.png']; 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(); 42 +}, 1000 ); 18 18 </script> 19 19 {{/html}}