Shulou(Shulou.com)06/03 Report--

This article shows you how to use Div to draw a dragon, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Disassembly demand

Front-end engineers are miserable when they encounter unreliable product managers and designers. We have a giant cauldron for final delivery, and all deadline feels like it's just for squeezing front-end engineers.

Ah, draw a dragon

What kind of painting, canvas?

Canvas can obtain the pixel lattice of the specified area.

Shit, we have a plan.

Code time

First use image search to find a silhouette of a dragon.

Draw the picture into canvas var canvas = document.getElementById ("canvas"); var ctx = canvas.getContext ("2d"); var image = new Image (); image.src = "dragon.jpg"; image.onload = function () {canvas.width = image.width; canvas.height = image.height; ctx.drawImage (image,0,0);} get and crop the lattice information of the canvas var imageData = ctx.getImageData. Data Ctx.fillStyle = "# ffffff"; ctx.fillRect; var gap = 6; for (var h = 0; h < image.height; h+=gap) {for (var w = 0; w < image.width; w+=gap) {var position = (image.width * h + w) * 4; var r = imageData [position], g = imageData [position + 1], b = imageData [position + 2] If (r+g+b==0) {ctx.fillStyle = "# 000"; ctx.fillRect (wrecoverhpd4);}

Now we have the lattice information of such a dragon.

Generate bubbles from lattice information domvar dragonContainer = document.getElementById ("container"); var dragonScale = 2; for (var h = 0; h < image.height; h+=gap) {for (var w = 0; w < image.width; w+=gap) {var position = (image.width * h + w) * 4; var r = imageData [position], g = imageData [position + 1], b = imageData [position + 2] If (r+g+b==0) {var bubble = document.createElement ("img"); bubble.src = "bubble.png"; bubble.setAttribute ("class", "bubble"); var bubbleSize = Math.random () * 10mm 20; bubble.style.left = (w*dragonScale-bubbleSize/2) + "px" Bubble.style.top = (h*dragonScale-bubbleSize/2) + "px"; bubble.style.width = bubble.style.height = bubbleSize+ "px"; bubble.style.animationDuration = Math.random () * 634 + "s"; dragonContainer.appendChild (bubble);}

The above content is how to draw a dragon with Div. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.