canvas 绘制文本_H5之家 - 中国HTML5教程资源分享第一站

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } canvas { background: #ddd; } </style> </head> <body> <h3>绘制文本</h3> <canvas></canvas> <script> var ctx = c11.getContext('2d'); var txt = 'abgyj中国123'; ctx.font = '30px SimHei'; ctx.textBaseline = 'top'; //ctx.fillText(txt, 0, 0); ctx.strokeText(txt, 0, 0); console.log( ctx.measureText(txt) ) </script> </body> </html>

结果：

itdadao

代码：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } canvas { background: #ddd; } </style> </head> <body> <h3>绘制文本</h3> <canvas></canvas> <script> var ctx = c11.getContext('2d'); var txt = 'dsfadf你好'; ctx.font = '30px SimHei'; ctx.textBaseline = 'top'; //左上角 ctx.strokeText(txt, 0, 0); //右上角 var w = ctx.measureText(txt).width; ctx.strokeText(txt, 500-w, 0); //左下角 ctx.fillText(txt, 0, 400-30); //右下角 ctx.fillText(txt, 500-w, 400-30); </script> </body> </html>

结果：

itdadao

代码：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { text-align: center; } canvas { background: #ddd; } </style> </head> <body> <h3>绘制文本</h3> <canvas></canvas> <script> var ctx = c11.getContext('2d'); var txt = '明天会更好！'; ctx.font = '60px SimHei'; ctx.textBaseline = 'top'; ctx.strokeStyle = '#f00'; var w = ctx.measureText(txt).width; var x = -w; var y = 0; setInterval(function(){ //清除已有内容 ctx.clearRect(0,0, 500, 400); //重新绘制文本 ctx.strokeText(txt, x, y); x += 10; if(x>=500){ //文本已到最右侧 x = -w; } }, 50) </script> </body> </html>

Tags：小小demo