Question

我正在尝试使用canvas和svg绘制圆角矩形，我想在鼠标悬停时更改矩形颜色。是否可以使用canvas＆amp; 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>

如何使用canvas和svg绘制圆角矩形？

2 个答案: