需求是这样的：在页面的预览图上面绘制一个矩形，画完立即保存，右上角出现一个删除按钮，要立即可以删除。一开始的思路是使用canvas去实现，把一个透明的画布放在预览图上，滚动的时候，红框就会随着这个画布滚动。那么用一个透明的canvasabsolute在画布上是行不通的。然后我就在想那生成一个canvas的高度是整个预览图的长度吧。但是思考了下，我们的场景预览图可能会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。并且生成了canvas，虽然也可以绘制一个删除按钮，实现点击，但也无法实现底层预览图上面红框悬浮效果了。怎么想这里使用canvas去绘制矩形框都是一个又复杂性能又差的方

需求是这样的：在页面的预览图上面绘制一个矩形，画完立即保存，右上角出现一个删除按钮，要立即可以删除。一开始的思路是使用canvas去实现，把一个透明的画布放在预览图上，滚动的时候，红框就会随着这个画布滚动。那么用一个透明的canvasabsolute在画布上是行不通的。然后我就在想那生成一个canvas的高度是整个预览图的长度吧。但是思考了下，我们的场景预览图可能会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。并且生成了canvas，虽然也可以绘制一个删除按钮，实现点击，但也无法实现底层预览图上面红框悬浮效果了。怎么想这里使用canvas去绘制矩形框都是一个又复杂性能又差的方

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析首先我们需要实现一个带有搜索功能的搜索框本次只实现两种框的搜索功能一种input一种select功能思维第一步初始版本先写出一个input和一个render还有两个按钮label="测试数据"key="1"name="测试数据"rules={xxx}style={xxx}>{true?:}查询重置开始升级版本（动态渲染搜索框）接下来可以将搜索的数据改为动态渲染因为

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析首先我们需要实现一个带有搜索功能的搜索框本次只实现两种框的搜索功能一种input一种select功能思维第一步初始版本先写出一个input和一个render还有两个按钮label="测试数据"key="1"name="测试数据"rules={xxx}style={xxx}>{true?:}查询重置开始升级版本（动态渲染搜索框）接下来可以将搜索的数据改为动态渲染因为