Canvas文本绘制
文字绘制；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> </head> <body> <canvas id='myCanvas' width='800' height='400'> your browser does not support canvas </canvas> <script type="text/javascript"> var c = document.getElementById('myCanvas'); var cxt = c.getContext('2d'); cxt.beginPath(); cxt.font = '30px Arial'; var txt = 'Hello World'; cxt.fillText(txt, 100, 50); cxt.strokeStyle = 'red'; cxt.moveTo(100, 50); // 字体坐标是左下角坐标 cxt.lineTo(300, 50); cxt.moveTo(100, 20); // 字体30px不是30像素 cxt.lineTo(300, 20); cxt.font = '30pt Arial'; cxt.strokeText(txt, 280, 50); // 字体30pt是30像素 cxt.fillText(txt, 100, 100, 50); // 整个文本宽度50px cxt.moveTo(100, 100); cxt.lineTo(150, 100); // 文本宽度是50像素 cxt.stroke(); // 文本对齐的方式 cxt.moveTo(100, 150); cxt.lineTo(200, 150); cxt.moveTo(100, 130); cxt.lineTo(200, 130); cxt.moveTo(100, 170); cxt.lineTo(200, 170); cxt.moveTo(150, 120); cxt.lineTo(150, 180); cxt.stroke(); cxt.font = '40pt Arial'; // '40pt Courier New'的字体高度与Arial不一样 cxt.textAlign = 'center'; //center,end,left,right,start cxt.textBaseline = 'middle'; //alphabetic,bottom,hanging,ideographic,middle,top cxt.fillText('A', 150, 150); </script> </body> </html>
