ホームページ > 記事 > ウェブフロントエンド > Canvas 描画四角形と SVG 描画四角形の 2 つのメソッド コード
Canvas 描画四角形と SVG 描画四角形の 2 つのメソッド コード
- 不言オリジナル
- 2018-08-08 11:28:251972ブラウズ
この記事の内容は、キャンバス上に四角形を描画する方法と 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('2d');//获得笔刷
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。