Canvas animation demo (from zero to one)

greatly 2021-04-07 21:43:02
canvas animation demo zero


Preface

For canvas The canvas met repeatedly during the interview , And I only know and have learned canvas Theoretical knowledge of , That's the whole one demo beep !

The corresponding files have been sorted and uploaded to your own warehouse ( It's all explained in the notes )

gitee Warehouse

github Warehouse

canvas.gif Follow imooc Series courses Learning summary , If there is something unclear , I also suggest learning from zero as I do

Canvas Basics

establish Canvas

HTML label

 <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: auto auto">
<!-- Compatibility error reduction -->
The current browser does not support Canvas, Please change your browser and try again
</canvas>
 Copy code 

Block-level elements , Default 350px wide ,150px high

W3C Specify that width and height To specify the size ( Canvas size and pixel size )

Javascript

const canvas = document.getElementById('canvas')
// Drawing context 2D mapping 
const context = canvas.getContext('2d')
 Copy code 

Canvas draw

Draw a straight line

// State settings - Take the top left corner as the vertex (0, 0)
context.moveTo(100, 100) // The nib moves 
context.lineTo(700, 700) // The brush moves to this point 
// Common properties 
// Pen line 
context.lineWidth = 5 // Line thickness 
context.strokeStyle = '#005588' // Line color 
context.stroke() // Began to draw 
 Copy code 

Draw polygon

// triangle 
context.moveTo(100, 100) // The nib moves 
context.lineTo(700, 700) // The brush moves to this point 
context.lineTo(100, 700) // The brush moves to this point 
context.lineTo(100, 100) // The brush moves to this point 
// Common properties 
// Pen line 
context.lineWidth = 5 // Line thickness 
context.strokeStyle = '#005588' // Line color 
// fill 
context.fillStyle = 'rgb(2, 100, 30)' // Fill color 
context.fill() // fill 
context.stroke() // Began to draw 
 Copy code 

Draw a jigsaw puzzle

// Tangram line data 
const tanGram = [
{p: [{x: 0, y: 0}, {x: 800, y: 0}, {x: 400, y: 400}], color: '#caff67'},
{p: [{x: 0, y: 0}, {x: 400, y: 400}, {x: 0, y: 800}], color: '#67beef'},
{p: [{x: 800, y: 0}, {x: 800, y: 400}, {x: 600, y: 600}, {x: 600, y:200}], color: '#ef3d61'},
{p: [{x: 600, y: 200}s, {x: 600, y: 600}, {x: 400, y: 400}], color: '#f9f51a'},
{p: [{x: 400, y: 400}, {x: 600, y: 600}, {x: 400, y: 800}, {x: 200, y: 600}], color: '#a594c0'},
{p: [{x: 200, y: 600}, {x: 400, y: 800}, {x: 0, y: 800}], color: '#fa8ecc'},
{p: [{x: 800, y: 400}, {x: 800, y: 800}, {x: 400, y: 800}], color: '#f6ca29'},
]
window.onload = function() {
// Neves 
const canvas = document.getElementById('canvas')
// Drawing context 2D mapping 
const context = canvas.getContext('2d')
const len = tanGram.length
// Drawing polygons 
for (let i = 0; i < len; i++) {
draw(tanGram[i], context)
}
}
function draw(piece, cxt) {
// Began to draw 
cxt.beginPath();
cxt.moveTo(piece.p[0].x, piece.p[0].y)
const len = piece.p.length
for (let i = 1; i < len; i++) {
cxt.lineTo(piece.p[i].x, piece.p[i].y)
}
// Finish drawing 
cxt.closePath()
cxt.fillStyle = piece.color
cxt.fill()
}
 Copy code 

Draw arcs and circles

Method properties

constext.arc(
centerx, centery, radius, // The coordinates of the origin of the center of the circle and the value of the radius 
startingAngle, endingAngle, // The range of radian values 
anticlockwise = false // Is it clockwise ( Optional )- Default false In a clockwise direction 
)
 Copy code 

arc

context.lineWidth = 5
context.strokeStyle = '#005588'
context.arc(300, 300, 200, 0, 1.5 + Math.PI)
context.stroke()
 Copy code 

Continuous arc

context.lineWidth = 5
context.strokeStyle = '#005588'
// Discontinuous arc 
for (let i = 0; i < 10; i++) {
context.beginPath()
context.arc(50 + i*100, 60, 40, 0, 2*Math.PI*(i+1)/10)
context.closePath()
context.stroke()
}
// Continuous arc 
for (let i = 0; i < 10; i++) {
context.beginPath()
context.arc(50 + i*100, 180, 40, 0, 2*Math.PI*(i+1)/10)
context.stroke()
}
 Copy code 

round

context.lineWidth = 5
context.strokeStyle = '#005588'
for (let i = 0; i < 10; i++) {
context.beginPath()
context.arc(50 + i*100, 60, 40, 0, 2*Math.PI*(i+1)/10)
context.closePath()
context.fill() // fill 
}
for (let i = 0; i < 10; i++) {
context.beginPath()
context.arc(50 + i*100, 180, 40, 0, 2*Math.PI*(i+1)/10)
context.fill() // fill 
}
 Copy code 

Realize the electronic clock

Drawing electronic clocks

Directory structure

digin.js // A two-dimensional lattice of numbers

countdown.js // The specific logic

index.html // Specific page

Two dimensional lattice - digin.js

Because there's so much data , Take a little example

// Express 0,1 It means to draw a circle 
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
]
 Copy code 

The specific logic - countdown.js

initialization

// Constant 
const WINDOW_WIDTH = 1024;
const WINDOW_HEIGHT = 768;
const RADIUS = 8;
const MARGIN_TOP = 60;
const MARGIN_LEFT = 30;
window.onload = function(){
// Initialize canvas 
const canvas = document.getElementById('canvas');
const context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
// Drawing method 
render( context )
}
 Copy code 

Draw the dot

// Draw the dot 
function renderDigit( x , y , num , cxt ){
cxt.fillStyle = "rgb(0,102,153)";
for(let i = 0 ; i < digit[num].length ; i ++ )
for(let j = 0 ; j < digit[num][i].length ; j ++ )
if( digit[num][i][j] == 1 ){
cxt.beginPath();
// The first (i, j) The center position of a circle :
// j*2*(R+1) => The first j Make a list 
// x: x+j*2*(R+1)+(R+1)
// y: y+i*2*(R+1)+(R+1)
cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI )
cxt.closePath()
cxt.fill()
}
}
 Copy code 

Draw digital dots

// Draw every dot of the number 
function render( cxt ){
let hours = 12
let minutes = 34
let seconds = 56
// 1
renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt )
// 2
renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt )
// :
renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt )
// 3
renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);
// 4
renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);
// :
renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);
// 5
renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);
// 6
renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);
}
 Copy code 

Time calculation

initialization

// Remember to dynamically change your deadline 
const endTime = new Date(2021,3,7,0,0,0);
let curShowTimeSeconds = 0
 Copy code 

draw

window.onload = function(){
// Initialize canvas 
const canvas = document.getElementById('canvas');
const context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
curShowTimeSeconds = getCurrentShowTimeSeconds()
render( context )
}
 Copy code 

Get the time numbers

// Get the current time and deadline 
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round( ret/1000 )
return ret >= 0 ? ret : 0;
}
 Copy code 

Draw digital dots

// Change value 
let hours = parseInt( curShowTimeSeconds / 3600);
let minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )
let seconds = curShowTimeSeconds % 60
 Copy code 

Refresh to get the current dynamic time number

In this way, the electronic clock is realized

animating

Clock digital animation

Directory structure

digin.js // A two-dimensional lattice of numbers

countdown.js // The specific logic

index.html // Specific page

Timed rendering

Use setInterval() To render animation

// countdown.js
window.onload = function(){
// Initialize canvas 
const canvas = document.getElementById('canvas');
const context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
curShowTimeSeconds = getCurrentShowTimeSeconds()
// Timed rendering 
setInterval(() => {
render( context );
update() // Update function 
}, 50)
}
 Copy code 

Update the clock

function update() {
// The next second clock 
const nextShowTimeSeconds = getCurrentShowTimeSeconds()
let nextHours = parseInt( nextShowTimeSeconds / 3600);
let nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 )
let nextSeconds = nextShowTimeSeconds % 60
// The current second clock 
let curHours = parseInt( curShowTimeSeconds / 3600);
let curMinutes = parseInt( (curShowTimeSeconds - curHours* 3600)/60 )
let curSeconds = curShowTimeSeconds % 60
// Update seconds 
if (nextShowTimeSeconds != curShowTimeSeconds) {
curShowTimeSeconds = nextShowTimeSeconds
}
}
 Copy code 

Update canvas

function render( cxt ){
// Refresh the entire screen rectangle 
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
let hours = parseInt( curShowTimeSeconds / 3600);
let minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )
let seconds = curShowTimeSeconds % 60
renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt )
renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt )
renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt )
renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);
renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);
renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);
renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);
renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);
}
 Copy code 

Ball animation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: auto auto">
<!-- Compatibility error reduction -->
The current browser does not support Canvas, Please change your browser and try again
</canvas>
<script>
// Initialize the ball 
const ball = { x: 512, y: 100, r: 20, g: 2, vx: -4, vy: 0, color: '#005588' }
window.onload = function() {
const canvas = document.getElementById('canvas')
// Drawing context 2D mapping 
const context = canvas.getContext('2d')
// Timer animation 
setInterval(() => {
// Rendering 
render(context)
// to update 
update()
}, 50)
}
// Animation 
function update() {
ball.x += ball.vx
ball.y += ball.vy
ball.vy += ball.g
// Hit the bottom 
if (ball.y >= 768 - ball.r) {
ball.y = 768 - ball.r
ball.vy = -ball.vy*0.6 // The frictional force 
}
}
function render(ctx) {
// Refresh canvas canvas 
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
ctx.fillStyle = ball.color
ctx.beginPath()
ctx.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI)
ctx.closePath()
ctx.fill()
}
</script>
</body>
</html>
 Copy code 

Clock ball animation

Directory structure

digin.js // A two-dimensional lattice of numbers

countdown.js // The specific logic

index.html // Specific page

Initialization data

// Constant 
const WINDOW_WIDTH = 1024;
const WINDOW_HEIGHT = 768;
const RADIUS = 8;
const MARGIN_TOP = 60;
const MARGIN_LEFT = 30;
const endTime = new Date(2021,3,7,0,0,0);
let curShowTimeSeconds = 0
// Storing balls 
const balls = [];
// Change colors 
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
 Copy code 

Update the ball

function update() {
// The next second clock 
const nextShowTimeSeconds = getCurrentShowTimeSeconds()
let nextHours = parseInt(nextShowTimeSeconds / 3600);
let nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60)
let nextSeconds = nextShowTimeSeconds % 60
// The current second clock 
let curHours = parseInt(curShowTimeSeconds / 3600);
let curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60)
let curSeconds = curShowTimeSeconds % 60
// Update seconds 
if (nextShowTimeSeconds != curShowTimeSeconds) {
// Yes 6 Two numbers together to judge the update 
if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
// Add the ball 
addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours / 10));
}
if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours / 10));
}
if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10));
}
if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10));
}
if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));
}
if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds % 10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
// Update the ball 
updateBalls();
}
 Copy code 

Add the ball

// Add the ball 
function addBalls(x, y, num) {
for (let i = 0; i < digit[num].length; i++)
for (let j = 0; j < digit[num][i].length; j++)
if (digit[num][i][j] == 1) {
const aBall = {
// origin 
x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
// Random animation design 
g: 1.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -5,
color: colors[Math.floor(Math.random() * colors.length)]
}
balls.push(aBall)
}
}
 Copy code 

Update the ball sport

// Update the ball sport 
function updateBalls() {
for (let i = 0; i < balls.length; i++) {
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
// collision detection 
if (balls[i].y >= WINDOW_HEIGHT - RADIUS) {
balls[i].y = WINDOW_HEIGHT - RADIUS;
balls[i].vy = -balls[i].vy * 0.75;
}
}
}
 Copy code 

Draw the ball

// Draw every dot of the number 
function render(cxt) {
// Refresh the entire screen rectangle 
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
let hours = parseInt(curShowTimeSeconds / 3600);
let minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60)
let seconds = curShowTimeSeconds % 60
renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);
// Draw the ball 
for (let i = 0; i < balls.length; i++) {
cxt.fillStyle = balls[i].color;
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI, true);
cxt.closePath();
cxt.fill();
}
}
 Copy code 

Optimize 、 Extended clock

performance optimization

Directory structure

digin.js // A two-dimensional lattice of numbers

countdown.js // The specific logic

index.html // Specific page

Realization

problem :balls The number of arrays is increasing , There will be limits .

solve : When the ball moves out canvas On canvas , The corresponding ball should be deleted .

The ball array should only have the balls that appear on the canvas ( It's going to get slower and slower )

// Update the ball sport 
function updateBalls() {
for (let i = 0; i < balls.length; i++) {
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
if (balls[i].y >= WINDOW_HEIGHT - RADIUS) {
balls[i].y = WINDOW_HEIGHT - RADIUS;
balls[i].vy = -balls[i].vy * 0.75;
}
}
// The quantity is initialized to 0 => Determine how many balls remain in the canvas 
let cnt = 0
for( let i = 0 ; i < balls.length ; i ++ )
// Whether in the canvas 
if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < WINDOW_WIDTH )
// Yes, add the ball 
balls[cnt++] = balls[i]
// Only the little balls that exist on the canvas 
while( balls.length > cnt ){
balls.pop();
}
}
 Copy code 

Screen adaptation

Let the initialization constant adapt to the current screen .

take DOM The elements are held up wide and high to get

<!DOCTYPE html>
<html style="height: 100%;">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="height: 100%;">
<canvas id="canvas" style="height: 100%;">
The current browser does not support Canvas, Please change your browser and try again
</canvas>
<script src="digit.js"></script>
<script src="countdown.js"></script>
</body>
</html>
 Copy code 

Dynamically define canvas initialization variables

// countdown.js
// Constant 
let WINDOW_WIDTH = 1024;
let WINDOW_HEIGHT = 768;
let RADIUS = 8;
let MARGIN_TOP = 60;
let MARGIN_LEFT = 30;
const endTime = new Date(2021, 3, 8, 0, 0, 0);
let curShowTimeSeconds = 0
// Storing balls 
const balls = [];
// Change colors 
const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]
window.onload = function () {
// Customize constants based on the user screen 
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight;
MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);
// according to renderDigit Of x To judge 
RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108)-1
MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5)
// Initialize canvas 
const canvas = document.getElementById('canvas');
const context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
curShowTimeSeconds = getCurrentShowTimeSeconds()
// Timed rendering 
setInterval(() => {
render(context);
update() // Update function 
}, 50)
}
 Copy code 

Zero time update

problem : If defined endTime So far less than 99 Hours => Then return to 00:00:00

solve : Get dynamic endTime

// Increase the current time by one hour 
let endTime = new Date()
endTime.setTime(endTime.getTime() + 3600 * 1000)
 Copy code 

Gorgeous clock effect

You can do the effect of the current clock , It's not just the countdown

A focus on getCurrentShowTimeSecond() in , How long has it been to go back to today .

// Get the current time 
function getCurrentShowTimeSeconds() {
let curTime = new Date();
// How long has it been today => The clock 
let ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds()
return ret
}
 Copy code 

summary

Put it on canvas Api

The following is a review of the common methods and attributes used in this learning course .

Canvas

HTML

JavaScript

  • const canvas = document.getElementById('canvas') // obtain canvas Elements 
    const context = canvas.getContext('2d') // Get context to draw 
     Copy code 
  • Common properties

// The width and height of the current canvas 
canvas.width
canvas.height
 Copy code 
  • Common methods
// Gets the context of the current canvas 
canvas.getContext('2d')
 Copy code 

Context

  • Common properties
// Pen width 
context.lineWidth
// Pen line color 
context.strokeStyle
// Fill color 
context.fillStyle
// The context corresponds to canvas canvas 
context.canvas
 Copy code 
  • Common methods
// Move the nib 
context.moveTo(x, y)
// Draw line 
context.lineTo(x, y)
// Draw an arc 
context.arc(cx, cy, r, sAng, eAng, anticlock = false)
// Begin to depict 
context.beginPath()
// Close the picture 
context.closePath()
// Draw pen lines in color 
context.stroke()
// Fill color 
context.fill()
// Refresh the rectangle 
context.clearRect(x, y, width, height)
 Copy code 

Postscript

come on. ~

Organize your front end architecture , And then find a good internship !

版权声明
本文为[greatly]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/04/20210407213623065r.html

  1. Behind the miracle of the sixth championship is the football with AI blessing in the Bundesliga
  2. An easy to use Visual Studio code extension - live server, suitable for front-end gadget development
  3. 用 Python 抓取公号文章保存成 HTML
  4. User login of front end spa project based on Vue and Quasar (2)
  5. Summary of common selectors in CSS
  6. Using Python to grab articles with public number and save them as HTML
  7. To "restless" you
  8. 【免费开源】基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)
  9. 【微信小程序】引入阿里巴巴图标库iconfont
  10. layui表格点击排序按钮后,表格绑定事件失效解决方法
  11. Unity解析和显示/播放GIF图片,支持http url,支持本地file://,支持暂停、继续播放
  12. 【vue】 export、export default、import的用法和区别
  13. [free and open source] crudapi front end spa project based on Vue and Quasar
  14. [wechat applet] introduces Alibaba icon library iconfont
  15. Layui table click Sort button, table binding event failure solution
  16. Element树形控件Tree踩坑:修改current-node-key无效
  17. Unity parses and displays / plays GIF images, supports HTTP URL, supports local file: / /, supports pause and resume playback
  18. Element树形控件Tree踩坑:修改current-node-key无效
  19. The usage and difference of export, export default and import
  20. Element tree control: invalid to modify current node key
  21. Element tree control: invalid to modify current node key
  22. linux下安装apache(httpd-2.4.3版本)各种坑
  23. How to install Apache (httpd-2.4.3) under Linux
  24. 程序员业余时间写的代码也算公司的?Nginx之父被捕引发争议
  25. Nacos serialize for class [com.alibaba.nacos.common.http.HttpRestResult] failed.
  26. Do programmers write code in their spare time? Controversy over the arrest of nginx's father
  27. Nacos serialize for class [ com.alibaba.nacos . common.http.HttpRestResult ] failed.
  28. Seamless management of API documents using eolink and gitlab
  29. vue 的基础应用(上)
  30. 28岁开始零基础学前端,这些血的教训你一定要避免
  31. Basic application of Vue
  32. Starting at the age of 28, you must avoid these bloody lessons
  33. Ubuntu 16.04 can not connect to the wireless solution and QQ installation
  34. Industry security experts talk about the rapid development of digital economy, how to guarantee the security of data elements?
  35. 利用Vue实现一个简单的购物车功能
  36. Behind the "tireless classroom" and teacher training, can byte education really "work wonders"?
  37. Using Vue to realize a simple shopping cart function
  38. 【css】伪类和伪类元素的区别
  39. 【css效果】实现简单的下拉菜单
  40. 【vue】父子组件传值
  41. The difference between pseudo class and pseudo class elements
  42. [CSS effect] simple drop-down menu
  43. [Vue] value transfer by parent-child component
  44. 【css】设置table表格边框样式
  45. 【css】修改input,textarea中的placeholder样式
  46. vue-router的两种模式(hash和history)及区别
  47. CSS3的滤镜filter属性
  48. [CSS] set table border style
  49. [CSS] modify the placeholder style in input and textarea
  50. Two modes of Vue router (hash and History) and their differences
  51. Filter property of CSS3
  52. 全局安装gulp 报错问题解决
  53. Solution of error report in global installation of gulp
  54. 18个好用的自定义react hook
  55. 你应该知道的常用服务器HTTP状态码?
  56. 18 user defined react hooks
  57. What HTTP status codes should you know about common servers?
  58. 手把手教你打造属于自己团队的前端小报系统
  59. Hand in hand to teach you to build your own front-end tabloid system
  60. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?