canvas标签strokeText在画布绘制(无填充色)文本。
绘制无填色文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置画布字体-HTML教程www.xuandaima.com</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font = "46px serif"; ctx.strokeText("炫代码", 50, 50); </script> </body> </html>
document.getElementById("myCanvas2") | 返回文档id属性为"myCanvas2"的对象 |
getContext("2d") | getContext() 返回画布上绘图的环境。getContext("2d") 返回绘制类型(2 维)的环境,未来可能会支持3维,但现在支持2维。 |
font = "46px serif"; | 设置字体大小为46像素,字体为“serif”。 |
strokeText("炫代码", 50, 50); | 绘制无填色文字和字体位置,X轴为“50”Y轴为“50”。 |
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
strokeText的默认颜色值为黑色
context.strokeText(text,x,y,maxWidth);
参数 | 描述 |
---|---|
text | 规定在画布上输出的文本。 |
x | 开始绘制文本的 x 坐标位置(相对于画布)。 |
y | 开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth | 可选。允许的最大文本宽度,以像素计。如果该值小于实际文本宽度时则会缩小文本宽度 |