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组件的字体如何加粗
305浏览 • 1回复 待解决
HarmonyOS 如何使用Canvas扇形
6浏览 • 1回复 待解决
Canvas的时候,怎么设置画笔颜色
430浏览 • 1回复 待解决
HarmonyOS使用canvas如何使文字垂直居中
682浏览 • 1回复 待解决
HarmonyOS如何实现文字轮播效果?
486浏览 • 1回复 待解决
canvas如何实现水印效果
962浏览 • 1回复 待解决
HarmonyOS Canvas 实现动画
56浏览 • 1回复 待解决
HarmonyOS canvas如何实现画线跟手效果
52浏览 • 1回复 待解决
文字动画效果如何实现
1921浏览 • 0回复 待解决
HarmonyOS 如何实现文字描边效果
455浏览 • 0回复 待解决
HarmonyOS 如何实现文字渐变色效果
60浏览 • 1回复 待解决
文字如何实现跑马灯效果?
361浏览 • 1回复 待解决
HarmonyOS 如何实现实时录音转文字
0浏览 • 0回复 待解决