- HTML5 Canvas Cookbook
- Eric Rowell
- 309字
- 2021-08-27 12:08:05
Working with text
Almost all applications require some sort of text to effectively communicate something to the user. This recipe will show you how to draw a simple text string with an optimistic welcoming.
How to do it...
Follow these steps to write text on the canvas:
- Define a 2D canvas context and set the text style:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.font = "40pt Calibri"; context.fillStyle = "black"; - Horizontally and vertically align the text, and then draw it:
// align text horizontally center context.textAlign = "center"; // align text vertically center context.textBaseline = "middle"; context.fillText("Hello World!", canvas.width / 2, 120); }; - Embed the canvas tag inside the body of the HTML document:
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> </canvas>
How it works...
To draw text with the HTML5 canvas, we can define the font style and size with the font property, the font color with the fillStyle property, the horizontal text alignment with the textAlign property, and the vertical text alignment with the textBaseline property. The textAlign property can be set to left, center, or right, and the textBaseline property can be set to top, hanging, middle, alphabetic, ideographic, or bottom. Unless otherwise specified, the textAlign property is defaulted to left, and the textBaseline property is defaulted to alphabetic.
There's more...
In addition to fillText(), the HTML5 canvas API also supports strokeText():
context.strokeText("Hello World!", x, y);
This method will color the perimeter of the text instead of filling it. To set both the fill and stroke for HTML canvas text, you can use both the fillText() and the strokeText() methods together. It's good practice to use the fillText() method before the strokeText() method in order to render the stroke thickness correctly.
- 自動控制工程設計入門
- Canvas LMS Course Design
- Managing Mission：Critical Domains and DNS
- Mobile DevOps
- Windows程序設計與架構
- 四向穿梭式自動化密集倉儲系統的設計與控制
- 構建高性能Web站點
- 項目管理成功利器Project 2007全程解析
- PVCBOT機器人控制技術入門
- LMMS：A Complete Guide to Dance Music Production Beginner's Guide
- INSTANT Puppet 3 Starter
- 未來學徒：讀懂人工智能飛馳時代
- Puppet 3 Beginner’s Guide
- Hadoop Beginner's Guide
- 穿越計算機的迷霧