Série d'apprentissage Canvas 1 : Première introduction à Canvas
Récemment, vous avez commencé à apprendre le canevas, et je prévois d'enregistrer quelques notes et résumés de l'ensemble du processus d'apprentissage du canevas. S'il y a des lacunes, veuillez les signaler.
1. Introduction au canevas
L'émergence de l'élément Canvas peut être dite. pour ouvrir l'animation de dessin du Web World, la porte du graphisme, sa fonction est très puissante
L'élément canevas est l'élément le plus puissant en HTML5, et ses capacités passent principalement par le Context (contexte de dessin/ environnement de dessin) dans Canvas affiché par l'objet. Cet objet est obtenu à partir de la toile elle-même.
var canvas = getElementById('canvas');var context = canvas.getContext('2d');
2. Sauvegarder le contenu de la toile
Texte contenu entre les éléments Canvas, ce texte est appelé "contenu de sauvegarde", qui ne sera affiché que lorsque le navigateur ne prend pas en charge l'élément canvas
<canvas>当前浏览器不支持canvas元素，请更换浏览器</canvas>
3. Taille du canevas
La largeur par défaut de l'élément canevas est de 300 px et la hauteur est de 150 px.
Nous pouvons modifier la taille du canevas via les attributs de largeur et de hauteur du canevas. Nous pouvons également modifier la taille de l'élément canevas via CSS. Mais il y a une différence entre les deux modifications.
Canvas a en fait deux ensembles de tailles :
L'un est la taille de l'élément de toile et l'autre est la taille de la toile. surface de dessin.
Lorsque nous utilisons les attributs du canevas width et height, nous modifions en fait la taille de l'élément et la taille de la surface de dessin en même temps
Lorsque nous paramétrons avec CSS, la taille de l'élément de canevas sera modifiée, ce qui n'affectera pas la taille de la surface de dessin. À ce moment, le navigateur mettra à l'échelle la surface de dessin, ce qui produira des effets que nous n'avons pas. souhaitez obtenir
Les performances des attributs de largeur et de hauteur lors de la modification de la taille du canevas
<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15);</script>
Performances lors de l'utilisation de CSS pour modifier la taille des éléments du canevas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas尺寸问题</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
width: 600px;
height: 300px;
border: 1px solid #ccc;
}</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);</script>
</body>
</html>
Ainsi, lorsque nous définissons la taille de l'élément Canvas, il est préférable de ne pas utiliser CSS pour la définir. On peut le régler comme ça
<canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>
ou
<script type="text/javascript">var canvas = document.getElementById('canvas');
canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';</script>
4. canvas API
canvas元素并未提供很多API，它只提供了两个属性三个方法，而绘图功能的方法与属性全都是canvas的绘图环境（context）对象提供。
width：设置/获取canvas元素绘图表面的宽度，默认值为300。
height：设置/获取canvas元素绘图表面的高度，默认值为150。
getContext(): 返回canvas元素的绘图环境对象。
toDataURL(): 描述：返回一个data URI：会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
toBold(): 描述：创建Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由User Agent( 用户代理端 )自行决定。
toDataURL():
type 可选参数
图片格式，默认为 image/png
encoderOptions 可选参数
当图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。
如果超出取值范围，将会使用默认值 0.92，默认分辨率为96dpi。
这里值得注意：
如果canvas的高度或者宽度为0时，会返回字符串 "data:,"
如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头，说明传入的类型不支持
Chrome支持“image/webp”类型
尽管在默认情况下canvas对象是一副位图，但是并不是HTML中的img元素，所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲canvas。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas尺寸问题</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
display: none;
}</style>
</head>
<body>
<img src="" alt="" id="dataImage">
<canvas id="canvas">当前浏览器不支持canvas，请更换浏览器</canvas>
<script type="text/javascript">var canvas = document.getElementById('canvas');var dataImage = document.getElementById('dataImage');
canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有pxcanvas.height = '300';var cxt = canvas.getContext('2d');
cxt.font = "38px Arial";
cxt.fillStyle = "#427ACC";
cxt.strokeStyle = "#00116A";
cxt.fillText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText('Hello World', canvas.width/2 - 110, canvas.height/2 + 15);var dataUrl = canvas.toDataURL();
dataImage.src = dataUrl;</script>
</body>
</html>
toBold():
目前该方法只有Firefox与IE10浏览器支持
参考文章：
MDN Web 技术文档
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
AI Hentai Generator
Générez AI Hentai gratuitement.
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)
Les noms de code complets de la série Xiaomi 15 révélés : Dada, Haotian, Xuanyuan
Aug 22, 2024 pm 06:47 PM
La série Xiaomi Mi 15 devrait être officiellement lancée en octobre, et les noms de code de sa série complète ont été exposés dans la base de code MiCode des médias étrangers. Parmi eux, le produit phare Xiaomi Mi 15 Ultra porte le nom de code « Xuanyuan » (qui signifie « Xuanyuan »). Ce nom vient de l'Empereur Jaune dans la mythologie chinoise, qui symbolise la noblesse. Le Xiaomi 15 porte le nom de code « Dada », tandis que le Xiaomi 15Pro s'appelle « Haotian » (qui signifie « Haotian »). Le nom de code interne du Xiaomi Mi 15S Pro est « dijun », qui fait allusion à l'empereur Jun, le dieu créateur du « Classique des montagnes et des mers ». Couvertures de la série Xiaomi 15Ultra
Révéler l'attrait du langage C : découvrir le potentiel des programmeurs
Feb 24, 2024 pm 11:21 PM
Le charme de l'apprentissage du langage C : libérer le potentiel des programmeurs Avec le développement continu de la technologie, la programmation informatique est devenue un domaine qui a beaucoup attiré l'attention. Parmi les nombreux langages de programmation, le langage C a toujours été apprécié des programmeurs. Sa simplicité, son efficacité et sa large application font de l’apprentissage du langage C la première étape pour de nombreuses personnes souhaitant entrer dans le domaine de la programmation. Cet article discutera du charme de l’apprentissage du langage C et de la manière de libérer le potentiel des programmeurs en apprenant le langage C. Tout d’abord, le charme de l’apprentissage du langage C réside dans sa simplicité. Comparé à d'autres langages de programmation, le langage C
Le meilleur moment pour acheter la série Huawei Mate 60, la nouvelle élimination de l'IA + mise à niveau de l'image et profiter des promotions d'automne
Aug 29, 2024 pm 03:33 PM
Depuis la mise en vente de la série Huawei Mate60 l’année dernière, j’utilise personnellement le Mate60Pro comme téléphone principal. En près d'un an, le Huawei Mate60Pro a subi plusieurs mises à niveau OTA et l'expérience globale a été considérablement améliorée, donnant aux gens le sentiment d'être constamment nouveaux. Par exemple, récemment, la série Huawei Mate60 a de nouveau reçu une mise à niveau majeure de ses capacités d'imagerie. Le premier est la nouvelle fonction d'élimination de l'IA, qui peut éliminer intelligemment les passants et les débris et remplir automatiquement les zones vides. Deuxièmement, la précision des couleurs et la clarté du téléobjectif de la caméra principale ont été considérablement améliorées. Étant donné que c'est la rentrée scolaire, la série Huawei Mate60 a également lancé une promotion d'automne : vous pouvez profiter d'une réduction allant jusqu'à 800 yuans lors de l'achat du téléphone, et le prix de départ est aussi bas que 4 999 yuans. Produits couramment utilisés et souvent nouveaux avec une grande valeur
Premiers pas avec Pygame : didacticiel complet d'installation et de configuration
Feb 19, 2024 pm 10:10 PM
Apprenez Pygame à partir de zéro : didacticiel complet d'installation et de configuration, exemples de code spécifiques requis Introduction : Pygame est une bibliothèque de développement de jeux open source développée à l'aide du langage de programmation Python. Elle fournit une multitude de fonctions et d'outils, permettant aux développeurs de créer facilement une variété de types. de jeu. Cet article vous aidera à apprendre Pygame à partir de zéro et fournira un didacticiel complet d'installation et de configuration, ainsi que des exemples de code spécifiques pour vous permettre de démarrer rapidement. Première partie : Installer Python et Pygame Tout d'abord, assurez-vous d'avoir
Apprenons ensemble à saisir le numéro racine dans Word
Mar 19, 2024 pm 08:52 PM
Lors de la modification du contenu du texte dans Word, vous devez parfois saisir des symboles de formule. Certains gars ne savent pas comment saisir le numéro racine dans Word, alors Xiaomian m'a demandé de partager avec mes amis un tutoriel sur la façon de saisir le numéro racine dans Word. J'espère que cela aidera mes amis. Tout d'abord, ouvrez le logiciel Word sur votre ordinateur, puis ouvrez le fichier que vous souhaitez modifier et déplacez le curseur vers l'emplacement où vous devez insérer le signe racine, reportez-vous à l'exemple d'image ci-dessous. 2. Sélectionnez [Insérer], puis sélectionnez [Formule] dans le symbole. Comme indiqué dans le cercle rouge dans l'image ci-dessous : 3. Sélectionnez ensuite [Insérer une nouvelle formule] ci-dessous. Comme indiqué dans le cercle rouge dans l'image ci-dessous : 4. Sélectionnez [Formule radicale], puis sélectionnez le signe racine approprié. Comme le montre le cercle rouge sur l'image ci-dessous :
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
Apprenez la fonction principale du langage Go à partir de zéro
Mar 27, 2024 pm 05:03 PM
Titre : Apprenez la fonction principale du langage Go à partir de zéro. En tant que langage de programmation simple et efficace, le langage Go est privilégié par les développeurs. Dans le langage Go, la fonction principale est une fonction d'entrée, et chaque programme Go doit contenir la fonction principale comme point d'entrée du programme. Cet article explique comment apprendre la fonction principale du langage Go à partir de zéro et fournit des exemples de code spécifiques. 1. Tout d’abord, nous devons installer l’environnement de développement du langage Go. Vous pouvez aller sur le site officiel (https://golang.org
Explorez le rôle puissant et l'application du canevas dans le développement de jeux
Jan 17, 2024 am 11:00 AM
Comprendre la puissance et l'application du canevas dans le développement de jeux Présentation : Avec le développement rapide de la technologie Internet, les jeux Web deviennent de plus en plus populaires parmi les joueurs. En tant qu'élément important du développement de jeux Web, la technologie Canvas a progressivement émergé dans le développement de jeux, démontrant sa puissance et ses applications puissantes. Cet article présentera le potentiel du canevas dans le développement de jeux et démontrera son application à travers des exemples de code spécifiques. 1. Introduction à la technologie Canvas Canvas est un nouvel élément HTML5 qui nous permet d'utiliser
