HTML5画布基本绘图的文本渲染

HTML5画布基本绘图的文本渲染
文本呈现主要有三种属性和三种方法:
上述属性和方法的基本用法如下:

Javascript代码将内容复制到剪贴板。
VaR的画布document.getelementbyid(画布);
VaR上下文= canvas.getcontext(2D);

背景。字体=大胆30px宋体; / /设置样式
context.strokestyle =# 1712f4 ;
context.stroketext(欢迎来到我的博客!

背景。字体=大胆50px宋体;
VaR context.createlineargradient GRD =(30, 200, 400,300); / /设置渐变填充样式
Grd.addColorStop (0, #1EF9F7);
grd.addcolorstop(0.25,# fc0f31 );
grd.addcolorstop(0.5,# ecf811 );
grd.addcolorstop(0.75,# 2f0af1 );
Grd.addColorStop(1,# 160303 );
context.fillstyle = GRD;
context.filltext(欢迎来到我的博客!

context.save();
Context.moveTo(200280);
Context.lineTo(200420);
context.stroke();
背景。字体=大胆20px宋体;
context.fillstyle =# f80707 ;
背景。TextAlign =左;
context.filltext(文本开始在指定的位置
背景。TextAlign =中心;
context.filltext(文本中心放置在指定的位置
背景。TextAlign =权;
context.filltext(结束指定的位置
context.restore();

context.save();
Context.moveTo(10500);
Context.lineTo(500500);
context.stroke();
背景。fillStyle =# f60d0d ;
背景。字体=大胆20px宋体;
背景。textbaseline =顶;
context.filltext(指定位置上
背景。textbaseline =底;
context.filltext(指定位置下面
背景。textbaseline =中间;
context.filltext(指定的位置是在中间
context.restore();
背景。字体=大胆40px宋体;
context.strokestyle =# 16f643 ;
欢迎光临我的博客!;
context.stroketext(欢迎来到我的博客!
context.stroketext(宽上面的字符串:+ context.measuretext(文本)。Width,10650);
结果如下:

以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

tag:文本绘图电脑软件

相关内容