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组件的字体如何加粗
1293浏览 • 1回复 待解决
HarmonyOS 如何使用Canvas扇形
1351浏览 • 1回复 待解决
Canvas的时候,怎么设置画笔颜色
1501浏览 • 1回复 待解决
HarmonyOS使用canvas如何使文字垂直居中
1684浏览 • 1回复 待解决
canvas如何实现水印效果
2166浏览 • 1回复 待解决
HarmonyOS如何实现文字轮播效果?
1474浏览 • 1回复 待解决
HarmonyOS Canvas 实现动画
1518浏览 • 1回复 待解决
HarmonyOS canvas如何实现画线跟手效果
1024浏览 • 1回复 待解决
HarmonyOS canvas动画如何实现逐帧动画
1207浏览 • 1回复 待解决
HarmonyOS Canvas的动画实现
751浏览 • 1回复 待解决
文字动画效果如何实现
3883浏览 • 0回复 待解决
HarmonyOS 如何实现文字描边效果
1681浏览 • 1回复 待解决
HarmonyOS 如何实现语音转成文字
986浏览 • 1回复 待解决
HarmonyOS 如何实现文字渐变色效果
1296浏览 • 1回复 待解决