キャンバスとsvgを使用して丸い四角形を描く方法は？

Question

私はキャンバスとsvgを使って丸い四角形を描画しようとしています。マウスの上にマウスを置くと四角形の色が変わります。キャンバスを使って可能ですか& svg？私はこのようなものが欲しい。以下は私のリンクです： - https://fxfactory.com/downloads/docs/noiseindustries/fxfactorypro/Thumbnails/Rounded%20Rectangle.jpg

Answer 1

SVG（スケーラブルベクターグラフィックス）とHTML Canvasは2つの技術です。 SVGはXMLベースで、タグの特定のセットとしてHTMLコード内に記述することができます：それはである。ここ

<canvas id="myCanvas" width="200" height="100" 
style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 

<script> 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0,150,75); 
</script> 

：

<svg width="400" height="110"> 
    <rect width="300" height="100" style="fill:rgb(128,128,255);stroke-width:3;stroke:rgb(0,0,255)" /> 
</svg> 

HTMLキャンバスはJavaScriptで作成されたグラフィックスのためだけのキャンバスです。アクション：

Answer 2

これはSVGで非常に簡単です。

.myrect { 
 
    fill: red; 
 
} 
 

 
.myrect:hover { 
 
    fill: green; 
 
}

<svg width="300" height="200"> 
 
    <rect class="myrect" x="10" y="10" width="280" height="180" rx="40" ry="40"/> 
 
</svg>