Ressources recommandées pour les vidéos de dessin et d'animation sur toile avec des effets de compte à rebours éblouissants

Canvas, comme son nom l'indique, est un canevas défini sur le navigateur, mais Canvas n'est pas seulement un élément, c'est un ensemble d'interfaces de programmation. Son émergence a dépassé l'intention originale de conception basée sur les documents du Web. Vous pouvez l’utiliser pour développer de nombreux contenus de rêve, permettant aux programmeurs de libérer pleinement leur créativité !

Adresse de lecture du cours : http://www.php.cn/course/303.html

Le Style d'enseignement de l'enseignant :

Les cours de l'enseignant sont simples et approfondis, de structure claire, analysés couche par couche, imbriqués, rigoureux dans l'argumentation et rigoureux dans la structure. Il utilise le pouvoir logique de la pensée. pour attirer l'attention des étudiants et contrôler le processus d'enseignement en classe. En écoutant les cours de l'enseignant, les étudiants acquièrent non seulement des connaissances, mais reçoivent également une formation à la réflexion, et sont également influencés et influencés par l'attitude académique rigoureuse de l'enseignant

La partie la plus difficile de cette vidéo est le compte à rebours effet Dessin et animation sur toile HTML :

HTML :

<canvas id="canvas" style="border:1px solid red;"></canvas>

JS :

var canvas = document.getElementById('canvas');　
var context = canvas.getContext('2d');

// 注意，是不加单位的，而且不建议在css中设置宽高。最好是调用width和height这两个属性
canvas.width = 1024;
canvas.height = 768;

Pratique : Tracez une ligne droite (soyez très prudent, l'état doit d'abord être défini avant d'appeler la méthode Stroke() pour dessiner. Si l'ordre est inversé, il y aura (il n'y aura aucun résultat, et aucune erreur ne sera signalée, et le débogueur ajustera également Pas de problème.)

// 先设置状态
    context.moveTo(100, 100);
    context.lineTo(700, 700);
    context.lineTo(700, 100);
    context.lineTo(100, 100);
    context.lineWidth = 10;
    context.strokeStyle = "pink";
// 再进项绘制
    context.stroke();

Définir un chemin :

context.moveTo(100, 100);  //接受两个参数，表示x坐标和y坐标
context.lineTo(700, 700);

Définir plusieurs chemins : envelopper l'état à définir avec la méthode suivante, puis appeler la méthode Stroke(), Vous pouvez tracer des lignes dans différents états

context.beginPath();
context.closePath();

Dessin du tangram : La figure 1 est dessinée par le professeur, la figure 2 est dessinée par moi. . Hahahaha, c'est tellement dur. Dans la prochaine leçon, j'apprendrai à dessiner des cercles et des arcs. Après avoir appris le système de canevas, j'essaierai d'utiliser la technologie de collision de js pour déplacer le puzzle et le diviser en différents graphiques

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!