interface Web
Tutoriel H5
Utilisez Canvas pour imiter la méthode de chargement de petites boules sur le client Baidu Tieba
Utilisez Canvas pour imiter la méthode de chargement de petites boules sur le client Baidu Tieba
Cet article vous présente principalement la méthode d'implémentation d'utilisation de Canvas pour imiter la boule de chargement du client Baidu Tieba. La corrélation après l'implémentation est très similaire. Un exemple de code détaillé est donné dans l'article pour votre référence et votre apprentissage, qui sera certain. bénéfice pour tout le monde. Il a une valeur de référence. Les amis qui en ont besoin peuvent venir étudier ensemble.
Avant-propos
J'ai vu récemment deux démos intéressantes, les rendus sont les suivants :
J'ai profité du temps libre du week-end pour l'imiter en utilisant H5 Canvas. Cet article implémente uniquement le premier rendu.
Voici l'effet que j'ai obtenu :
Principe de mise en œuvre
Le principe de mise en œuvre est basé sur l'article du bref livre et ne sera pas répété ici. Obtenons maintenant cet effet étape par étape.
Étape 0 : Tracez un cercle
Le code source est le suivant :
L'effet de course est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度贴吧客户端Loading小球</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = 500
canvas.height = 500
var grid = canvas.width / 4
var cx = canvas.width / 2 // 圆中心点 x 坐标
var cy = canvas.height / 2 // 圆中心点 y 坐标
function circle() {
ctx.beginPath()
ctx.arc(cx, cy, grid / 2, 0, 2 * Math.PI)
}
circle()
ctx.stroke()
</script>
</body>
</html>
Cette démo implique uniquement l'utilisation la plus simple de Canvas.
Étape 1 : Dessinez le mot bleu « Post »
Utilisez ctx.fillText pour dessiner un mot bleu « Post » au centre du cercle. Le texte est en gras et centré horizontalement.
Le code est le suivant :
function text(fillStyle) {
var fontSize = size / 250 * 120
ctx.font = 'bold ' + fontSize + 'px Arial'
ctx.textAlign = 'center'
ctx.fillStyle = fillStyle
ctx.fillText('贴', cx, cy + fontSize * 0.3)
}
text('#29a3fe')L'effet est le suivant :
Étape 2 : Dessinez des vagues bleues
var waveSize = size / 6 // 波浪大小
var x = 0 // 波浪位置偏移大小
function curve() {
ctx.beginPath()
ctx.moveTo(cx - size + x + size / 2, cy)
ctx.quadraticCurveTo(cx - size + size / 4 + x + size / 2, cy - waveSize, cx - size + size / 2 + x + size / 2, cy)
ctx.quadraticCurveTo(cx - size + size * 3 / 4 + x + size / 2, cy + waveSize, cx - size + size + x + size / 2, cy)
ctx.quadraticCurveTo(cx + size / 4 + x + size / 2, cy - waveSize, cx + size / 2 + x + size / 2, cy)
ctx.quadraticCurveTo(cx + size * 3 / 4 + x + size / 2, cy + waveSize, cx + size + x + size / 2, cy)
ctx.lineTo(cx + size + x + size / 2, canvas.height)
ctx.lineTo(cx - size + x + size / 2, canvas.height)
ctx.lineTo(cx - size + x + size / 2, cy)
ctx.closePath()
}
ctx.fillStyle = '#29a3fe'
curve()
ctx.fill()L'effet est le suivant :
Étape 3 : Dessinez le mot blanc "sticker"
curve() ctx.clip() text('#f00')
La première phrase du code curve() crée un La différence entre le chemin ondulé et la troisième étape est que le chemin de remplissage ctx.fill() n'est pas utilisé ici, mais le chemin de détourage ctx.clip() est utilisé dans ce cas, le chemin dessiné plus tard (y compris le texte). ne peut être dessiné que dans la zone de découpage.
Afin de le distinguer de la couleur de fond, j'ai changé le mot "post" en rouge.
L'effet est le suivant :
Étape 4 : Dessinez des vagues en mouvement
function loop(){
ctx.clearRect(0, 0, canvas.width, canvas.height)
x -= 1.5
x = x % size
ctx.save()
circle()
ctx.stroke()
ctx.fillStyle = '#29a3fe'
curve()
ctx.fill()
ctx.restore()
requestAnimationFrame(loop)
}
loop()L'effet est le suivant :
Étape 5 : Intégrer le contenu précédent
L'effet est le suivant :
Étape 6 : Découpez le cercle
Mettez l'étape 0 :
circle() ctx.stroke()
Remplacez par :
circle() ctx.clip()
De cette façon, vous pouvez découper la forme extérieure du cercle, et vous avez terminé.
Enfin, le code source complet est joint :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,
body {
height: 100%;
}
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = 500
canvas.height = 500
var size = canvas.width / 4 // 圆的大小
var cx = canvas.width / 2 // 圆中心点 x 坐标
var cy = canvas.height / 2 // 圆中心点 y 坐标
var waveSize = size / 6 // 波浪大小
var x = 0 // 波浪位置偏移大小
function circle() {
ctx.beginPath()
ctx.arc(cx, cy, size / 2, 0, 2 * Math.PI)
}
function curve() {
ctx.beginPath()
ctx.moveTo(cx - size + x + size / 2, cy)
ctx.quadraticCurveTo(cx - size + size / 4 + x + size / 2, cy - waveSize, cx - size + size / 2 + x + size / 2, cy)
ctx.quadraticCurveTo(cx - size + size * 3 / 4 + x + size / 2, cy + waveSize, cx - size + size + x + size / 2, cy)
ctx.quadraticCurveTo(cx + size / 4 + x + size / 2, cy - waveSize, cx + size / 2 + x + size / 2, cy)
ctx.quadraticCurveTo(cx + size * 3 / 4 + x + size / 2, cy + waveSize, cx + size + x + size / 2, cy)
ctx.lineTo(cx + size + x + size / 2, canvas.height)
ctx.lineTo(cx - size + x + size / 2, canvas.height)
ctx.lineTo(cx - size + x + size / 2, cy)
ctx.closePath()
}
function text(fillStyle) {
var fontSize = size / 250 * 120
ctx.font = 'bold ' + fontSize + 'px Arial'
ctx.textAlign = 'center'
ctx.fillStyle = fillStyle
ctx.fillText('贴', cx, cy + fontSize * 0.3)
}
function loop(){
ctx.clearRect(0, 0, canvas.width, canvas.height)
x -= 1.5
x = x % size
ctx.save()
circle()
ctx.clip()
text('#29a3fe')
ctx.fillStyle = '#29a3fe'
curve()
ctx.fill()
curve()
ctx.clip()
text('#fff')
ctx.restore()
requestAnimationFrame(loop)
}
loop()
</script>
</body>
</html>Ce qui précède est l'intégralité du contenu de cet article, j'espère que ce sera le cas. être utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
html5 utilise html2canvas pour implémenter les captures d'écran du navigateur
Comment dessiner une étoile à cinq branches avec HTML5 canvas
html5 utilise canvas pour obtenir l'effet de flamme qui suit le curseur
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1205
24
![VMware Horizon Client ne peut pas être ouvert [Réparer]](https://img.php.cn/upload/article/000/887/227/170835607042441.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
VMware Horizon Client ne peut pas être ouvert [Réparer]
Feb 19, 2024 pm 11:21 PM
VMware Horizon Client vous aide à accéder facilement aux postes de travail virtuels. Cependant, l'infrastructure de bureau virtuel peut parfois rencontrer des problèmes de démarrage. Cet article décrit les solutions que vous pouvez adopter lorsque le client VMware Horizon ne parvient pas à démarrer correctement. Pourquoi mon client VMware Horizon ne s'ouvre-t-il pas ? Lors de la configuration de VDI, si le client VMWareHorizon n'est pas ouvert, une erreur peut se produire. Veuillez confirmer que votre administrateur informatique a fourni l'URL et les informations d'identification correctes. Si tout va bien, suivez les solutions mentionnées dans ce guide pour résoudre le problème. Réparer le client VMWareHorizon qui ne s'ouvre pas si VMW ne s'ouvre pas sur votre ordinateur Windows
![Le client VMware Horizon se bloque ou se bloque lors de la connexion [Réparer]](https://img.php.cn/upload/article/000/887/227/170942987315391.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Le client VMware Horizon se bloque ou se bloque lors de la connexion [Réparer]
Mar 03, 2024 am 09:37 AM
Lors de la connexion à un VDI à l'aide du client VMWareHorizon, nous pouvons rencontrer des situations où l'application se bloque lors de l'authentification ou la connexion se bloque. Cet article explorera ce problème et proposera des moyens de résoudre cette situation. Lorsque le client VMWareHorizon rencontre des problèmes de gel ou de connexion, vous pouvez prendre certaines mesures pour résoudre le problème. Réparer le client VMWareHorizon se bloque ou reste bloqué lors de la connexion Si le client VMWareHorizon se bloque ou ne parvient pas à se connecter sous Windows 11/10, appliquez les solutions mentionnées ci-dessous : Vérifiez la connexion réseau Redémarrez le client Horizon Vérifiez l'état du serveur Horizon Effacez le cache du client Réparer Ho
Guide de développement de clients PHP MQTT
Mar 27, 2024 am 09:21 AM
MQTT (MessageQueuingTelemetryTransport) est un protocole léger de transmission de messages couramment utilisé pour la communication entre les appareils IoT. PHP est un langage de programmation côté serveur couramment utilisé qui peut être utilisé pour développer des clients MQTT. Cet article présentera comment utiliser PHP pour développer un client MQTT et inclura le contenu suivant : Concepts de base du protocole MQTT Exemples de sélection et d'utilisation de la bibliothèque client PHPMQTT : Utilisation du client PHPMQTT pour publier et
Comment résoudre le problème selon lequel la page Web Baidu Netdisk ne peut pas démarrer le client ?
Mar 13, 2024 pm 05:00 PM
Lorsque de nombreux amis téléchargent des fichiers, ils parcourent d'abord la page Web, puis les transfèrent vers le client pour les télécharger. Mais parfois, les utilisateurs rencontreront le problème que la page Web Baidu Netdisk ne peut pas démarrer le client. En réponse à ce problème, l'éditeur a préparé une solution pour vous permettre de résoudre le problème selon lequel la page Web Baidu Netdisk ne peut pas démarrer le client. Les amis dans le besoin peuvent s'y référer. Solution : 1. Peut-être que Baidu Netdisk n'est pas la dernière version. Ouvrez manuellement le client Baidu Netdisk, cliquez sur le bouton Paramètres dans le coin supérieur droit, puis cliquez sur Mise à niveau de la version. S'il n'y a pas de mise à jour, l'invite suivante apparaîtra. S'il y a une mise à jour, veuillez suivre les invites pour mettre à jour. 2. Le programme du service de détection de Baidu Cloud Disk peut être désactivé. Il est possible que nous utilisions manuellement ou utilisions un logiciel de sécurité pour désactiver automatiquement le programme du service de détection de Baidu Cloud Disk. Vérifie s'il te plaît
Comment supprimer vos propres publications dans Baidu Tieba Liste des méthodes pour supprimer vos propres publications
Mar 12, 2024 pm 05:25 PM
Lorsque nous utilisons cette plate-forme, nous devrions tous être familiers avec certaines des fonctions ci-dessus. Quel que soit l'aspect dans lequel nous nous trouvons, nous pouvons voir qu'il y a beaucoup de messages dessus. Bien sûr, nous pouvons également y publier nous-mêmes. Certains messages et ainsi de suite, donc à chaque fois vous sentirez que certains choix dans différents aspects sont disponibles, donc aujourd'hui afin de mieux comprendre l'utilisation des fonctions ci-dessus, et d'assurer la qualité de nos messages, j'ai directement la possibilité de supprimez certains des messages ci-dessus, mais si vous ne savez pas comment faire, aujourd'hui l'éditeur vous expliquera comment le supprimer. Amis intéressés et ayant des idées, veuillez contacter l'éditeur maintenant. Jetons un coup d'oeil, je. je pense que tu l'aimeras. Supprimer
Apprenez le cadre de canevas et expliquez en détail le cadre de canevas couramment utilisé
Jan 17, 2024 am 11:03 AM
Explorez le framework Canvas : Pour comprendre quels sont les frameworks Canvas couramment utilisés, des exemples de code spécifiques sont nécessaires. Introduction : Canvas est une API de dessin fournie en HTML5, grâce à laquelle nous pouvons obtenir des graphiques et des effets d'animation riches. Afin d'améliorer l'efficacité et la commodité du dessin, de nombreux développeurs ont développé différents frameworks Canvas. Cet article présentera certains frameworks Canvas couramment utilisés et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre comment utiliser ces frameworks. 1.Cadre EaselJSEa
Quelles versions de html2canvas existe-t-il ?
Aug 22, 2023 pm 05:58 PM
Les versions de html2canvas incluent html2canvas v0.x, html2canvas v1.x, etc. Introduction détaillée : 1. html2canvas v0.x, qui est une première version de html2canvas. La dernière version stable est la v0.5.0-alpha1. Il s'agit d'une version mature qui a été largement utilisée et vérifiée dans de nombreux projets ; 2. html2canvas v1.x, il s'agit d'une nouvelle version de html2canvas.
uniapp implémente comment utiliser Canvas pour dessiner des graphiques et des effets d'animation
Oct 18, 2023 am 10:42 AM
Comment utiliser Canvas pour dessiner des graphiques et des effets d'animation dans Uniapp nécessite des exemples de code spécifiques 1. Introduction Avec la popularité des appareils mobiles, de plus en plus d'applications doivent afficher divers graphiques et effets d'animation sur le terminal mobile. En tant que framework de développement multiplateforme basé sur Vue.js, uniapp offre la possibilité d'utiliser un canevas pour dessiner des graphiques et des effets d'animation. Cet article présentera comment Uniapp utilise Canvas pour obtenir des effets de graphique et d'animation, et donnera des exemples de code spécifiques. 2. toile
