使用canvas在数字上绘制横线

 时间:2024-10-13 03:14:08

1、在使用canvas绘制海报的时候,需要体现原价和优惠价,原价需要以划掉的形式表现出来。

使用canvas在数字上绘制横线

2、在canvas中,数字中的横线其实就是一个矩形。我们调用canvas绘制矩形的方法就可以了。

3、首先,需要调用measureText方法,计算数字的宽度,这样绘制出来的矩形正好和数字一样宽度。使用rect方法绘制矩形,ctx.rect(x,y,width,1),一般矩形的高度为1px就可以了。最后,使用ctx.fill()填充矩形。

使用canvas在数字上绘制横线

4、注意,ctx.fill()方法是填充矩形,这有可能导致你的海报图片也被填充了,如图所示。

使用canvas在数字上绘制横线

5、遇到这种情况,就需要使用ctx.beginPath()和ctx.closePath()方法,把绘制横线的内容包裹起来,就相当于内容写在view里面,这样就不会影响其他的矩形了。

使用canvas在数字上绘制横线
  • Bandizip显示最近文件历史记录如何开启
  • 怎样用pytorch训练GAN模型
  • 操作性条件作用与社会认知理论对强化的存在什么区别
  • 什么是可保风险,其条件有哪些
  • 古剑2食谱46道
  • 热门搜索
    论文参考文献怎么写 下巴长疙瘩怎么回事 优酷怎么上传视频 总胆红素偏高怎么办 癞蛤蟆怎么吃 亿健跑步机怎么样 婴儿吐奶是怎么回事 苹果怎么设置手机铃声 冰箱冷藏室温度怎么调 进击的巨人巨人怎么来的