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

Today, I would like to share with you how to use canvas tags in html to achieve ordinary dynamic effects and particle dynamic effects of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

Canvas is used to draw images and animations on a web page, which can be understood as a canvas to build the desired effect on this canvas.

Ordinary clock

Ordinary dynamic effect is the use of canvas's api to achieve regular patterns and animation.

Draw scale

This example is the drawing of the hour scale: there are 12 hours on the dial, the Math.PI is 180 °, occupying 30 °per hour.

.save () saves the state of the canvas's current environment and draws on it. When the drawing is complete, return to the previously saved path state and properties.

The minute scale is the same, just change the angle and style.

/ / hour time scale offscreenCanvasCtx.save (); for (var I = 0; I)

< 12; i++) { offscreenCanvasCtx.beginPath(); // 刻度颜色 offscreenCanvasCtx.strokeStyle = '#fff'; // 刻度宽度 offscreenCanvasCtx.lineWidth = 3; // 每小时占据30° offscreenCanvasCtx.rotate(Math.PI / 6); // 开始绘制的位置 offscreenCanvasCtx.lineTo(140, 0) // 结束绘制的位置; offscreenCanvasCtx.lineTo(120, 0); // 绘制路径 offscreenCanvasCtx.stroke(); } offscreenCanvasCtx.restore(); 指针指向 以秒针为例：获取当前时间的秒数，并计算对应的偏移角度 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr >

12? Hr-12: hr; / / second hand offscreenCanvasCtx.save (); offscreenCanvasCtx.rotate (sec * (Math.PI / 30));. OffscreenCanvasCtx.stroke ()

Particle kinetic effect

Canvas can be used to draw complex, irregular animations. Particle effects can be used to achieve complex, random dynamic effects.

Particles, refers to each pixel in the image data imageData. After each pixel is obtained, attributes or events are added to interact with the particles in the region to achieve a dynamic effect.

Particle acquisition

The image in the following image is converted into an example, which first renders the picture on canvas, and then gets each pixel in the area where the text is located.

Let image = new Image (); image.src='../image/logo.png'; let pixels= []; / / store pixel data let imageData; image.width = 300; image.height = 300 / / render the image and get the pixel information image.onload=function () {ctx.drawImage (image, (canvas.width-image.width) / 2, (canvas.height-image.height) / 2meme image.widthdepartment image.height) ImageData=ctx.getImageData ((canvas.width-image.width) / 2, (canvas.height-image.height) / 2image.width.image.height); / / get chart pixel information / / draw image}

Pixel information

The size of the picture is 300mm 300, there are 90000 pixels, each pixel occupies 4 bits, and the rgba data is stored.

Particle rendering

Function getPixels () {the one-dimensional array data of var pos=0; var data=imageData.data; / / RGBA / / the height and width of the source image are 300px for (var iArray 1

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.