Maison > interface Web > js tutoriel > le corps du texte

Comment dessiner des carrés en javascript

藏色散人
Libérer: 2023-01-04 09:35:14
original
2185 Les gens l'ont consulté

Comment dessiner un carré en javascript : créez d'abord un exemple de fichier HTML ; puis ajoutez une balise canevas au corps ; puis ajoutez une balise de script à l'en-tête pour saisir le code javascript ; méthode.

Comment dessiner des carrés en javascript

L'environnement d'exploitation de cet article : système Windows7, version javascript1.8.5&&html5, ordinateur Dell G3.

Insérer javascript dans du HTML pour dessiner un rectangle

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas元素示例</title>
<script>
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext(&#39;2d&#39;);
context.fillStyle = "#eeefff";
context.fillRect(0,0,400,300);
context.fillStyle = "green";
context.strokeStyle = "red";
context.lineWidth = 1;
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
}
</script>
</head>
<body οnlοad="draw(&#39;canvas&#39;);">
<h1>canvas中画矩形</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
Copier après la connexion

Comment dessiner des carrés en javascript

[Apprentissage recommandé : Tutoriel avancé javascript]

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal