如何使用畫布和svg繪製圓形矩形？

Question

我想使用畫布和svg繪製圓形矩形，並且當我將鼠標懸停在上面時，我想更改矩形的顏色。是否有可能使用帆布& svg？我想要這樣的東西。以下是我的鏈接： - https://fxfactory.com/downloads/docs/noiseindustries/fxfactorypro/Thumbnails/Rounded%20Rectangle.jpg

Answer 1

SVG（可縮放矢量圖形）和HTML Canvas是兩種獨立的技術。 SVG是一種基於XML和可寫的HTML代碼中的一組特定的標籤：

<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 Canvas是隻是用JavaScript創建的圖形畫布：

<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> 

這是動作： http://codepen.io/1GR3/pen/ZpaPJR

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>