Maison > Article > interface Web > Deux codes de méthode pour le rectangle de dessin sur toile et le rectangle de dessin SVG

Deux codes de méthode pour le rectangle de dessin sur toile et le rectangle de dessin SVG

不言original: 2018-08-08 11:28:252027parcourir

Le contenu de cet article concerne les codes de deux méthodes pour dessiner des rectangles sur toile et dessiner des rectangles sur svg. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1.Canvas dessine un rectangle

<!doctype html>
<html>
<head>
<!--canvas画矩形-->
<style>
#huaban{
border:1px solid;
}
</style>
<script>
</script>
<meta charset="UTF-8">
</head>
<body>
<canvas width="200" height="200" id="huaban">
</canvas>
<script>
var can=document.getElementById("huaban");//获得画板数据
var con=can.getContext(&#39;2d&#39;);//获得笔刷
   con.fillStyle="red";//设置填充颜色
   con.strokeStyle="blue";//设置线条颜色
   con.fillRect(10,10,100,100);//填充画矩形
   con.strokeRect(100,100,200,200);//线条画矩形

</script>
</body>
</html>

2.svg dessine un rectangle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100"></rect>    
        </svg>

rect représente le rectangle

rect représente le ; largeur et hauteur de l'élément Les attributs peuvent définir la hauteur et la largeur du rectangle ;

Rectangle arrondi :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;" x="0" y="20" rx="20" ry="20"></rect>    
        </svg>

L'attribut fill-opacity de CSS définit la transparence de la couleur de remplissage (la la plage légale est : 0 - 1) ;

L'attribut Stroke-opacity de CSS définit la transparence de la couleur de la bordure (la plage légale est : 0 - 1) ; CSS définit l'opacité de l'élément entier (la plage légale est : 0 - 1

Pour faire pivoter en svg, vous pouvez utiliser transform='rotate(45)

Articles Liés

Voir plus