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

//获取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()

context.fillStyle = "#000000"//颜色

context.font = "normal 20px 微软雅黑"//字体

context.textBaseline = "middle"//竖直对齐

context.textAlign = "center"//水平对齐　

context.fillText("文字", x坐标, y坐标, 文字宽度)//绘制文字

以上是canvas绘制文字常用的.

canvas 中可以用 fillText() 绘出文字。

例如：

Your browser does not support the HTML5 canvas tag.</canvas>

var c = document.getElementById("myCanvas")

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

ctx.font = "20px Georgia"

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

ctx.font = "30px Verdana"

var gradient = ctx.createLinearGradient(0, 0, c.width, 0)

gradient.addColorStop("0", "magenta")

gradient.addColorStop("0.5", "blue")

gradient.addColorStop("1.0", "red")

ctx.fillStyle = gradient

ctx.fillText("Big smile!", 10, 90)

</script>

<p><strong>Note:</strong>The canvas tag is not supported in Internet

Explorer 8 and earlier versions.</p>

</body>

</html>

====

如果想插入显示一个文件或网页，可以用 <iframe>, 而不是用画布<canvas>,

例如：

欢迎分享，转载请注明来源：内存溢出

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