Maison > Article > interface Web > Comment dessiner des carrés en javascript
Comment dessiner des carrés en javascript
- 藏色散人original
- 2021-04-08 14:57:332162parcourir
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.
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('2d');
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('canvas');">
<h1>canvas中画矩形</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
[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!
Déclaration：
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
Article précédent：Comment supprimer des attributs en javascriptArticle suivant：Comment supprimer des attributs en javascript