HTML5的学习之canvas画布
这篇博客继续学习canvas的文字相关属性和方法。
属性
| 属性 | 描述 |
| font | 设置或返回文本内容的当前字体属性。 |
| textAlign | 设置或返回文本内容的当前对齐方式。 |
| textBaseline | 设置或返回在绘制文本时使用的当前文本基线。 |
方法
| 方法 | 描述 |
| fillText() | 在画布上绘制"被填充的"文本。 |
| strokeText() | 在画布上绘制文本（无填充）。 |
| measureText() | 返回包含指定文本宽度的对象。 |
使用canvas绘制艺术字
HTML代码：
<canvasid="my_canvas"></canvas>
JavaScript代码：
// 1.获取元素varoCanvas=document.getElementById("my_canvas"); // 2.设置画布大小oCanvas.width="1000"; oCanvas.height="1000"; // 3.获取 画布环境varmyCanvas=oCanvas.getContext("2d"); // 4.绘图varlinearGra=myCanvas.createLinearGradient(20,100,500,500) linearGra.addColorStop(0,"red"); linearGra.addColorStop(0.2,"yellow"); linearGra.addColorStop(0.4,"blue"); linearGra.addColorStop(0.6,"green"); linearGra.addColorStop(0.8,"purple"); linearGra.addColorStop(1.0,"skyblue"); // 文字 context.font="italic small-caps bold 12px arial";myCanvas.font="60px heiti"; // 空心文字 context.strokeText(text,x,y,maxWidth);myCanvas.strokeStyle=linearGra; myCanvas.strokeText("HELLO CHINA",20,100,200); // 填充文字 context.fillText(text,x,y,maxWidth);myCanvas.fillStyle=linearGra; myCanvas.fillText("HELLO CHINA",20,200,200);
视频讲解链接：
