canvas学习(三):文字渲染

时间:2023-03-08 16:05:57

一、绘制基本的文字:

var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext('2d') ctx.font = "bold 30px 微软雅黑" ctx.fillText('canvas学习', 100 ,100)
ctx.fillStyle = "red" //填充的文本 ctx.lineWidth = 1
ctx.strokeStyle="blue"
ctx.strokeText('canvas学习',100,300) //边框文本

注意:我们也可以用渐变色和图片填充文字的背景

canvas学习(三):文字渲染

二:font属性    传送门

三:textAlign属性   传送门     textBaseline  传送门

四:文本度量  measureText   传送门