HarmonyOS Canvas 画文字如何实现字体加粗

Canvas 画文字如何实现字体加粗  代码:

Canvas(this.context) 
 .onReady(() => { 
  //绘制填充类文本-x,y-w,h 
  let grad = this.context.createLinearGradient(0, 0, 80, 80) 
  grad.addColorStop(0.0, '#260000') 
  grad.addColorStop(1.0, '#FF0000') 
  this.context.fillStyle = grad 
  // this.context.font = vp2px(16) + 'px sans-serif-medium' 
  // this.context.font = vp2px(16) + 'px serif' 
  this.context.font = vp2px(16) + 'px sans-serif-black' 
  this.context.fillText("产品热榜", 0, 30) 
  // this.context.strokeText("产品热榜", 0, 30) 
  this.context.textAlign = "start" 
 }) 
 .width(80) 
 .height(48)
HarmonyOS
2024-08-29 09:42:35
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

font属性可以一次性设置所有的字体样式,中间使用空格隔开就好。

Canvas(this.context) 
 .onReady(() => { 
  //绘制填充类文本-x,y-w,h 
  let grad = this.context.createLinearGradient(0, 0, 80, 80) 
  grad.addColorStop(0.0, '#260000') 
  grad.addColorStop(1.0, '#FF0000') 
  this.context.fillStyle = grad 
  // this.context.font = vp2px(16) + 'px sans-serif-medium' 
  // this.context.font = vp2px(16) + 'px serif' 
  // font属性可以设置所有的字体样式 
  this.context.font = vp2px(18) + 'px bold sans-serif-black' 
  this.context.fillText("产品热榜", 0, 30) 
  // this.context.strokeText("产品热榜", 0, 30) 
  this.context.textAlign = "start" 
 }) 
 .width(80) 
 .height(48)
分享
微博
QQ
微信
回复
2024-08-29 18:14:46
相关问题
text组件的字体如何加粗
221浏览 • 1回复 待解决
Canvas的时候,怎么设置画笔颜色
393浏览 • 1回复 待解决
HarmonyOS使用canvas如何使文字垂直居中
605浏览 • 1回复 待解决
HarmonyOS如何实现文字轮播效果?
434浏览 • 1回复 待解决
canvas如何实现水印效果
918浏览 • 1回复 待解决
HarmonyOS 如何实现文字描边效果
402浏览 • 0回复 待解决
文字动画效果如何实现
1889浏览 • 0回复 待解决
鸿蒙提供的画中功能要怎么实现
960浏览 • 1回复 待解决
文字空行高度与字体高度不一致
2094浏览 • 1回复 待解决
文字如何实现跑马灯效果?
311浏览 • 1回复 待解决
Canvas制作图表如何实现滑动惯性?
421浏览 • 1回复 待解决
HarmonyOS Canvas如何重置clip
238浏览 • 1回复 待解决
HarmonyOS 字体大小如何设置?
451浏览 • 1回复 待解决