canvas绘制文字,html canvas 绘图

　　与文本渲染有关的主要有三个属性以及三个方法：

　　上述的属性和方法的基本用法如下：

　　Java Script语言代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；var context=画布。获取上下文(“2d”)；语境。font= bold 30 px arial//设置样式语境。笔画风格= # 1712 F4 ；context.strokeText(欢迎来到我的博客!,30,100);语境。font= bold 50 px arialvargrd=上下文。createlanegradient(30，200，400，300)；//设置渐变填充样式grd.addColorStop(0， # 1ef9f 7 )；grd.addColorStop(0.25， fc0f 31 )；grd.addColorStop(0.5， ECF 811 )；grd.addColorStop(0.75， 2f 0af 1 )；grd.addColorStop(1， # 160303 )；context . fill style=grd context . fill text(欢迎来到我的博客!,30,200);语境。save()；context.moveTo(200，280)；context.lineTo(200，420)；语境。笔画()；语境。font= bold 20 px arial语境。填充样式= # f 80707context . text align= left context . fill text(文本在指定的位置开始,200,300);context . text align= center context . fill text(文本的中心被放置在指定的位置,200,350);context . text align= right context . fill text(文本在指定的位置结束,200,400);语境。restore()；语境。save()；context.moveTo(10，500)；context.lineTo(500，500)；语境。笔画()；语境。填充样式= # f60d 0d语境。font= bold 20 px arialcontext . text baseline= top context . fill text(指定位置在上面,10,500);context . text baseline= bottom context . fill text(指定位置在下面,150,500);context . text baseline= middle context . fill text(指定位置居中,300,500);语境。restore()；语境。font= bold 40 px arial语境。笔画样式= # 16f 643vartext=欢迎来到我的博客!；context.strokeText(欢迎来到我的博客!,10,600);context.strokeText(上面字符串的宽度为： context.measureText(text).宽度，10650);效果如下：

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。