怎样在canvas圆形进度条中间放文字

怎样在canvas圆形进度条中间放文字,第1张

//获取canvas对象

var c=document.getElementById("myCanvas")

//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

var ctx=c.getContext("2d")

ctx.beginPath()

ctx.arc(95,50,40,0,2*Math.PI)

//设置字体大小和字体样式

ctx.font="30px Arial"

//设置文本

ctx.fillText("Hello World",10,50)

ctx.stroke()

html5在实心圆写文字的方法如下:

1、创建一个画布,设置宽度和高度。

2、获取到元素,varcanvas=document.getElementById("canvas")。

3、创建context对象,varctx=canvas.getContext("2d")。

4、设置绘制文本的字体和字体大小,ctx.font="40px微软雅黑"。

5、在画布上绘制实心的文本,其中三个参数含义是:第一个是绘制的文本,第二个是绘制文本横坐标起始坐标,第三个是纵坐标的起始坐标,ctx.fillText("HTML5",200,200)。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11782445.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存