前端需要在后端返回的图片集合里,根据提供的对角线坐标绘制矩形。矩形可能是多个。效果达到如下:
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画布上指定区域+橡皮擦功能实现;在画布上平铺指定图片;在画布上绘制文本;总结案例之刮刮乐功能实现)
你好,将图片绘制到canvas之后,原图片上的所有属性和方法以及时间在canvas上的图片上都将不再产生作用,因为图片在canvas是以像素的形式存在,而不是DOM元素。如果一定要用,这需要将时间绑定到canvas上,并且画板上的内容清除之后再重新绘制一幅带有边框的图片(这里需要作一些绘图运算)h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。
- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
文本效果(常用)
text-shadow:设置文字阴影
word-wrap:强制换行
word-break
css3提出@font-face规则,规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform:向元素应用2/3D转换
transition:过渡
动画
@keyframes规则:
animation、animation-name、animation-duration等
用户界面(常用)
box-sizing、resize
css3新增伪类
:nth-child()
:nth-last-child()
:only-child
:last-child
:nth-of-type()
:only-of-type()
:empty
:target 这个伪类允许我们选择基于URL的元素,如果这个元素有一个识别器(比如跟着一个#),那么:target会对使用这个ID识别器的元素增加样式。
:enabled
:disabled
:checked
:not
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)