Code example for canvas to implement github404 dynamic effects, canvasgithub404
A few days ago, I used css styles and js to pay tribute to the similar github404 interface. At the same time, I recently came into contact with canvas. I took advantage of the previous js algorithm in the spirit of tossing, canvas is used to achieve the dynamic effect of github404.
File directory
File Resources
File Source Code and images are provided at the end of the article
Code
Webpage body
Here, we define the width and height of canvas as block-level elements. These img labels are used to load these images, so we do not need to load them in js, and then set the image to not display: none.
<Body> <canvas id = "mycanvas" width = "1680" height = "630" style = "margin: 0; display: block "> your browser does not support canvas </canvas> </body>
Js Section
1. Here I have created a new json object named github404 to encapsulate all the parameters and methods.
2. create an imgData object and pass all the parameters required by img to ps: top and left for positioning in the drawImage () method. The scale parameter is used to calculate the image movement when the mouse moves.
3. The init () method is used for initialization and is an external interface.
4. the implementation of the painting method is to traverse imgData [] cyclically with the for in method, assign values in sequence, and draw images with the drawImage () method, but pay attention to the use of ctx in the moving drawing method. the clearRect () method first clears the canvas.
<Script> var github404 = {imgData: {// record the information of all images with the json object bg: {top: 0, left: 110, // top and left for positioning, use src :'. /images/field.png ', // scale: 0.06 for the corresponding image path. // ratio of the image to be moved when you move the mouse}, building_2: {top: 133, left: 1182, src :'. /images/building_2.png ', scale: 0.05,}, building_1: {top: 79, left: 884, src :'. /images/buliding_1.png ', scale: 0.03,}, speeder_shadow: {top: 261, left: 776, src :'. /images/speeder_shadow.png ', scale: 0.01,}, cat_shadow: {top: 288, left: 667, src :'. /images/cat_shadow.png ', scale: 0.02,}, speeder: {top: 146, left: 777, src :'. /images/speeder.png ', scale: 0.01,}, cat: {top: 88, left: 656, src :'. /images/cat.png ', scale: 0.05,}, text: {top: 70, left: 364, src :'. /images/text.png ', scale: 0.03,},}, rate_w: 0, rate_h: 0, // offset ratio field_width: 1680, field_height: 370, // canvas: document. querySelector ('# mycanvas'), // obtain the canvas Element init: function () {// initialize the loading method this. setRateWH (); this. placeImg (); this. attachMouseEvent () ;}, setRateWH: function () {// Method for Calculating the offset ratio var window_width = document. body. clientWidth; var window_height = document. body. clientHeight; this. rate_w = this. field_width/window_width; this. rate_h = this. field_height/window_height;}, placeImg: function () {// initialized drawing method let ctx = this. canvas. getContext ('2d '); // get the paint brush for (key in this. imgData) {// traverse the imageData object var image = new Image (); var left = this. imgData [key]. left; var top = this. imgData [key]. top; image. src = this. imgData [key]. src; ctx. drawImage (image, left, top, image. width, image. height) ;}}, attachMouseEvent: function () {var that = this; document. body. onmousemove = function (e) {that. picMove (e. pageX, e. pageY) ;}, picMove: function (pageX, pageY) {// The method for re-drawing when the mouse moves. let ctx = this. canvas. getContext ('2d '); ctx. clearRect (0, 0, this. canvas. width, this. canvas. height); for (key in this. imgData) {var image = new Image (); var offer_w = this. rate_w * pageX * this. imgData [key]. scale; var offer_h = this. rate_h * pageY * this. imgData [key]. scale; // defines left and top. When you draw a picture below, specify var left = this for the parameter. field_width/100-offer_w + this. imgData [key]. left; var top = this. field_height/100-offer_h + this. imgData [key]. top; image. src = this. imgData [key]. src; ctx. drawImage (image, left, top, image. width, image. height) ;}} window. onload = function () {// only call the github404 init method to encapsulate the data github404.init () ;}</script>
Summary
Canvas is used to achieve this dynamic effect, so that I can learn more about canvas usage. Make me
You have a better understanding of how to organize code by using json objects to encapsulate data and methods.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
