canvas学习(三):文字渲染

一、绘制基本的文字:

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)  //边框文本

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

 

 

 

二:font属性    传送门

 

 

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

 

四:文本度量  measureText   传送门 

 

posted @ 2017-11-20 18:09  _林冲  阅读(937)  评论(0编辑  收藏  举报