<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg demo</title>
</head>
<body>
<svg width="500" height="500" style="background-color: #398439" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" rx="20" ry="20" style="fill:yellowstroke-width:3stroke:red"/>
</svg>
</body>
</html>
rect标签参数解析：
rect 元素的 width 和 height 属性可定义矩形的高度和宽度，现在给矩形的宽为300，高为100
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
rx和ry为圆角，不设置时默认直角
前端需要在后端返回的图片集合里，根据提供的对角线坐标绘制矩形。矩形可能是多个。效果达到如下：
1、根据后端返回的图片list，生成canvas画布，
2、把图片画到canvas里面，再根据后端返回的坐标，在canvas里画矩形框。
此项目中，后端返回的坐标是基于缩略图的，但是前端渲染在页面上的图片，会按宽为788px来显示，所以坐标应该要按照比例来算。
真实的左上x点的计算方式为：真实宽 / 压缩宽 * 压缩x点
https://blog.csdn.net/qq_29594393/article/details/52849339
https://www.runoob.com/w3cnote/html5-canvas-intro.html
https://www.imooc.com/wenda/detail/551496
https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501
①画矩形时，如果里面的参数有不是整数的话，容易导致边框粗细不一等问题。
②当矩形的边框lineWidth设置为1px时候，会出现线条模糊的问题。
关于第②个问题的延申：
这是测试提给我的bug：
我的思路存在的问题：
首先，同样是矩形的边框我同样设置的都是1px，不应该有的线条颜色深，有的颜色淡啊，排除了参数没有取整的问题后，我怀疑了颜色red在画布上的渲染问题，换成十六进制的同样有问题。就在我一筹莫展的时候，我叫来了小伙伴，我说你看这线条颜色是不是不一样，我开始怀疑我的眼神有问题。小伙伴说，你给线条整粗点看看这问题明显吗。我把边框线条设置了2px，发现和1px的粗细是一样的，并且颜色一样了线条不模糊了。换成别的宽度，只要不是1px都没有问题了。
思维的问题在于，我百度问题的描述有问题，我之前一直搜canvas绘制矩形线条深浅不一，我应该搜canvas矩形线条模糊。我排查问题的时候，固定思维模式觉得1px写的没错，却没有尝试排查。
关于这个问题的详细解答与解决办法：
canvas1px线条模糊
我的理解
canvas的线条画法不一样，canvas的每条线都有一条无限细的“中线”，线条的宽度是从中线向两侧延伸的，也就是说canvas绘制1px的时候，是中线向左右两边延申各取0.5，并不是向某一边延申（如果只是往右延申就不再是问题了），此时问题出现了，计算机不允许出现小于1px的图形，所以他做了一个折中的事：把这两个像素都绘制了。所以，如此一来，本来1px的线条，就成了看起来2px宽的线条。
延申：
HTML 5 Canvas详细讲解 ———— 第二篇（清除canvas画布上指定区域+橡皮擦功能实现；在画布上平铺指定图片；在画布上绘制文本；总结案例之刮刮乐功能实现）
制作长方形框架和正方形框架可以使用HTML和CSS语言来实现。下面是制作长方形框架和正方形框架的示例代码：制作长方形框架
php
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义长方形框架的样式 */
.rectangle {
width: 200px
height: 100px
border: 2px solid black
}
</style>
</head>
<body>
<!-- 使用div元素创建长方形框架 -->
<div class="rectangle"></div>
</body>
</html>
在上面的代码中，我们定义了一个名为.rectangle的CSS样式类，其中width和height属性分别指定了长方形的宽度和高度，border属性指定了边框的样式。然后使用<div>元素创建一个长方形框架，将.rectangle样式应用到该元素即可。
制作正方形框架
php
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义正方形框架的样式 */
.square {
width: 100px
height: 100px
border: 2px solid black
}
</style>
</head>
<body>
<!-- 使用div元素创建正方形框架 -->
<div class="square"></div>
</body>
</html>
在上面的代码中，我们同样定义了一个名为.square的CSS样式类，其中width和height属性都设置为100px，从而创建一个正方形的框架。然后使用<div>元素创建一个正方形框架，将.square样式应用到该元素即可。
需要注意的是，上述示例代码仅用于演示如何制作长方形框架和正方形框架，实际应用中可能需要根据实际情况进行修改和调整
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）