Var spacing = 10 // spacing between lines in pixels
CODE WEB WALLPAPER UPDATE
But first we need to define the method that will be called at every update ( frame ).įor this we need to add these 2 lines of code, we can put them at the final part of the init ( so once the intialization has finished, the visualization will start updating ) Now that we have an Stage object, we can add objects to the stage. You can set it to false if you want to see if you can spot a difference in performance/ smoothness. Doing so will result in a bit loss of smoothness in movement ( per pixel ), but gain in FPS and reduced CPU load. This means the canvas will not place objects at halve pixels. For performance optimalisation we will enable 'snapToPixel'. We have added an private variable 'stage', and within the 'init' we create a new Stage object for the canvas. Create stage for the canvas with ID '#canvas' To prevent a 'flicker' effect, we style it using CSS as well.
CODE WEB WALLPAPER CODE
Note that the code we inserted just before, will also set the size of the canvas, but only after the script is triggered. We need to remove any space the body tag reserves, and scale the canvas to height and width. Next we will add some basic styles to make the canvas 'fullscreen'. We will be setting it later on in the javascript file. You will need to set the resolution of the canvas manually by specifying the 'width' and 'height' attributes of the canvas. Please note that just setting the size of the canvas to 100% height and 100% width will stretch the canvas to fullscreen, but will not change the drawing resolution.
You will also see that the default size of the canvas is 300x150 pixels. When you open the page, the canvas element is by default transparent.
CODE WEB WALLPAPER DOWNLOAD
NOTE : Please remember to download the libraries and use local references, you could also add CDN links in your HTML, but if the user doesn't have an internet connection, your wallpaper will not work!Ī very basic HTML page, that loads the 2 libraries we are going to use in our own script file, and a style sheet for CSS rules we need in our project. ( we will not use this library in this guide, because we won't be loading a lot of local files into javascript )įor the least amount of overhead, you could download EaselJS and TweenJS separate, but for the sake of comprehension we will use the CreateJS library in this guide. PreloadJS : Helps with preloading of many files ( progress bar ).
( we will not use this library in this guide, because we won't use our own audio ) SoundJS : Helps with audio support across browsers, and controlling audio.
TweenJS : Helps with tweening/transitions objects on the canvas ( movement/ fade etc. EaselJS : Helps with drawing to the canvas. If you don't want to use jQuery, please replace all code that uses jQuery selectors with your own prefered library ( or plain javascript ofcourse )ĬreateJS is a library that helps structure your project when working with a canvas element. jQuery is a javascript library that has a lot neat functions that makes certain operations more easy to complete. JQuery will be used throughout this guide. To run and test our wallpaper in a 'live' situation ( your own desktop ). We need Wallpaper Engine as our host application. ( preferably chrome - because it uses the webkit renderer, which Wallpaper Engine uses too, to render your webpage )
0 kommentar(er)
