Maison >interface Web >js tutoriel >Méthode de dessin JS pour générer des compétences Petal Effect_Javascript

Méthode de dessin JS pour générer des compétences Petal Effect_Javascript

WBOY
WBOYoriginal
2016-05-16 15:46:541719parcourir

L'exemple de cet article décrit la méthode de génération d'effets de pétales via le dessin JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le dessin JS est utilisé ici pour générer l'effet pétale. L'effet de dessin graphique est généré par du JS pur. Si vous souhaitez étudier les connaissances du dessin graphique JavaScript, vous souhaiterez peut-être vous référer à ce petit programme, je pense. plutôt bien.

L'effet de l'opération est comme indiqué ci-dessous :

Le code spécifique est le suivant :

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js绘制生成花瓣效果</title>
</head>
<body>
<script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+300)+"; top: "+(y+200)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<script>
for(t=1;t<=360;t++){
lo=200 * Math.sin(2 * (Math.PI / 180) * t);
x = lo * Math.cos((Math.PI / 180) * t);
y = lo * Math.sin((Math.PI / 180) * t); 
a(x,y,"#000000");
lo=200 * Math.cos(2 * (Math.PI / 180) * t);
x = lo * Math.cos((Math.PI / 180) * t);
y = lo * Math.sin((Math.PI / 180) * t); 
a(x,y,"#ff0000");
}
</script>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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