Canvas 描画四角形と SVG 描画四角形の 2 つのメソッドコード-H5 チュートリアル-php.cn

Canvas 描画四角形と SVG 描画四角形の 2 つのメソッドコード

不言

リリース： 2018-08-08 11:28:25

オリジナル

2016 人が閲覧しました

この記事の内容は、キャンバス上に四角形を描画する方法と SVG 上に四角形を描画する 2 つの方法のコードについてです。必要な方は参考にしていただければ幸いです。

1.canvas は長方形を描画します

<!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 は長方形を描画します

rect 要素の width 属性と height 属性は、

角丸長方形の高さと幅を定義できます。 :

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

ログイン後にコピー

CSS fill-opacity 属性は塗りつぶしの色の透明度を定義します (有効な範囲は 0 ～ 1)。

CSS のストロークの不透明度属性は境界線の色の透明度を定義します (有効な範囲は次のとおりです)。 0 - 1);

CSS の不透明度属性の定義要素全体の不透明度 (正当な範囲は 0 - 1)

svg で回転したい場合は、transform='rotate(45) を使用できます。

おすすめ関連記事:

jpg画像をsvgテキストパスアニメーションに変換する例(コード付き)

SVG描画機能: svgで花を描ける(コード付き)

以上がCanvas 描画四角形と SVG 描画四角形の 2 つのメソッドコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Canvas 描画四角形と SVG 描画四角形の 2 つのメソッド コード

Canvas 描画四角形と SVG 描画四角形の 2 つのメソッドコード