recherche

Maison >interface Web >Tutoriel H5 >Tutoriel HTML5 pour dessiner un partage de code de rectangle

Tutoriel HTML5 pour dessiner un partage de code de rectangle

高洛峰
高洛峰original
2017-03-12 16:50:072210parcourir

html5 peut dessiner de nombreux types de formes. Vous trouverez ci-dessous le code pour dessiner un rectangle. Veuillez l'utiliser comme référence

Le code est le suivant :

<!DOCTYPE html><head> 
<meta charset=utf-8> 
<title>HTML5画矩形</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://www.php.cn/"></script</a>>
</head> 
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d");        //获取2d内容的引用，调用绘图API
draw.fillStyle="#ff0000";            //方式一指定填充颜色
draw.fillRect(0,0,300,100);            //坐标和长宽
draw.fillStyle="rgba(0,0,255,0.5)";    //方式二rgb+透明度
draw.fillRect(400,0,100,100);        //坐标和长宽
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body> 
</html>
.



Rendu

Tutoriel HTML5 pour dessiner un partage de code de rectangle

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：Description détaillée de l'instance de stockage local Html5webArticle suivant：Description détaillée de l'instance de stockage local Html5web

Articles Liés

Voir plus