如何使用画布和 svg 绘制圆形矩形？答案

【问题标题】：How to draw round rectangle using canvas and svg?如何使用画布和 svg 绘制圆形矩形？
【发布时间】：2017-02-12 20:13:51
【问题描述】：

我正在尝试使用画布和 svg 绘制圆形矩形，并且当我将鼠标悬停在它上面时我想更改矩形颜色。是否可以使用画布和 svg？我想要这样的东西。下面是我的链接：- https://fxfactory.com/downloads/docs/noiseindustries/fxfactorypro/Thumbnails/Rounded%20Rectangle.jpg

【问题讨论】：

Context.strokeRect 不使用 svg

标签： canvas svg

【解决方案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

【讨论】：

但是您可以在画布中绘制 svg 并在 svg 中附加画布（请注意，您不能在附加到画布上绘制的 svg 的画布上进行绘制，如下？）

【解决方案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>

【讨论】：