html代码：
<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas> </body>js代码：
function draw(id){ // 1.获取canvas的id var canvas = document.getElementById('canvas'); // 2.取得上下文 var context = canvas.getContext('2d'); // 3.设置背景颜色、填充背景区域 context.fillStyle = "#f45da9"; context.fillRect(0,0,500,350); // 4.设置文字字体 context.font = "700 40px 微软雅黑"; // 5.设置文字垂直方式对齐 context.textBaseline = 'top'; // 6.设置文字水平方式对齐 context.textAlign = 'start'; // 设置文字颜色、绘制字符串 context.fillStyle = "#fff"; context.fillText('HTML5',50,50); // 轮廓方式填充字符串 context.strokeStyle = "#fff"; context.strokeText('学习HTML5',20,100); }解析： context.font = “700 40px 微软雅黑”;是设置文字字体，参数分别是：字体粗细，字体大小。 context.fillText(‘HTML5’,50,50); 是绘制字符串，参数分别是：绘制的文字，横坐标x轴的距离，纵坐标y轴的距离。 context.strokeText(‘学习HTML5’,20,100);是轮廓方式填充字符串，参数分别是：绘制的文字，横坐标x轴的距离，纵坐标y轴的距离。 context.textBaseline = ‘alphabetic’; 是 设置文字垂直方式对齐 属性还可以是：top(顶部对齐)、hanging(悬挂)、middle(中间对齐)、bottom(底部对齐)、alphabetic是默认对齐方式；具体如下图： 横线是画布上横线。
context.textAlign = ‘start’;是设置文字水平方式对齐 属性还可以是：start、end、left、right、center,其中start是默认对齐方式；具体如下图： 竖线代表画布左边线。
