一、fillText()函数绘制文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //设置填充文字样式 ctx.font = "20px Georgia"; //设置文字及其位置 ctx.fillText("Hello World", 10, 50); ctx.font = "30px Verdana" //设置线性渐变色 var gradient = ctx.createLinearGradient(0, 0, c.width, 0); gradient.addColorStop("0", "magenta") gradient.addColorStop("0.5", "blue") gradient.addColorStop("1.0", "red") ctx.fillStyle = gradient; ctx.fillText("Big smile!", 10, 90) } </script> </html>
二、strokeText()函数绘制文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //设置填充文字样式 ctx.font = "20px Georgia"; //设置文字及其位置 ctx.fillText("Hello World", 10, 50); ctx.font = "30px Verdana" //设置线性渐变色 var gradient = ctx.createLinearGradient(0, 0, c.width, 0); gradient.addColorStop("0", "magenta") gradient.addColorStop("0.5", "blue") gradient.addColorStop("1.0", "red") ctx.strokeStyle = gradient; ctx.strokeText("Big smile!", 10, 90) } </script> </html>
三、设置文字大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //设置填充文字样式，大小20px ctx.font = "20px Georgia"; //设置文字及其位置 ctx.fillText("Hello World", 10, 50); //设置填充文字样式，大小30px ctx.font = "30px Verdana" ctx.fillText("Hello World", 10, 90); } </script> </html>
四、设置文字字体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //设置填充文字样式，字体Georgia ctx.font = "20px Georgia"; //设置文字及其位置 ctx.fillText("Hello World(Georgia)", 10, 50); //设置填充文字样式，大小20px ctx.font = "20px Verdana" ctx.fillText("Hello World(Verdana)", 10, 90); //设置填充文字样式，大小20px ctx.font = "20px Arial" ctx.fillText("Hello World(Arial)", 10, 110); } </script> </html>
五、设置文字粗体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //设置填充文字样式，粗体 normal ctx.font = "normal 20px Arial"; //设置文字及其位置 ctx.fillText("Hello World(normal)", 10, 50); //设置填充文字样式，粗体 bold ctx.font = "bold 20px Arial" ctx.fillText("Hello World(bold)", 10, 90); //设置填充文字样式，粗体 bolder ctx.font = "bolder 20px Arial" ctx.fillText("Hello World(bolder)", 10, 110); //设置填充文字样式，粗体 lighter ctx.font = "lighter 20px Arial" ctx.fillText("Hello World(lighter)", 10, 130); //设置填充文字样式，粗体 100 ctx.font = "100 20px Arial" ctx.fillText("Hello World(100)", 10, 150); //设置填充文字样式，粗体 600 ctx.font = "600 20px Arial" ctx.fillText("Hello World(600)", 10, 170); //设置填充文字样式，粗体 900 ctx.font = "900 20px Arial" ctx.fillText("Hello World(900)", 10, 190); } </script> </html>
六、斜体设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //设置填充文字样式，font-weight normal ctx.font = "normal 20px Arial"; //设置文字及其位置 ctx.fillText("Hello World(normal)", 10, 50); //设置填充文字样式，font-style italic ctx.font = "italic 20px Arial" ctx.fillText("Hello World(italic)", 10, 90); //设置填充文字样式，font-style oblique ctx.font = "oblique 20px Arial" ctx.fillText("Hello World(oblique)", 10, 130); } </script> </html>
七、文字对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //绘制一条基本线 ctx.strokeStyle = 'red'; ctx.moveTo(150, 20); ctx.lineTo(150, 170); ctx.stroke(); //设置填充文字样式 ctx.font = "20px Arial"; //设置对方式 ctx.textAlign = 'start' //设置文字及其位置 ctx.fillText("textAlign='start'", 150, 60); //设置对方式 ctx.textAlign = 'end' //设置文字及其位置 ctx.fillText("textAlign='end'", 150, 80); //设置对方式 ctx.textAlign = 'left' //设置文字及其位置 ctx.fillText("textAlign='left'", 150, 100); //设置对方式 ctx.textAlign = 'center' //设置文字及其位置 ctx.fillText("textAlign='center'", 150, 120); //设置对方式 ctx.textAlign = 'right' //设置文字及其位置 ctx.fillText("textAlign='right'", 150, 140); } </script> </html>
八、文字基线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="200" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); var param = [{ //普通字母线 baseLne: "alphabetic", y: 50 }, { //方框底线 baseLne: "bottom", y: 100 }, { //悬挂基线 baseLne: "hanging", y: 150 }, { //表意基线 baseLne: "ideographic", y: 200 }, { //方框中线 baseLne: "middle", y: 250 }, { //方框顶端 baseLne: "top", y: 300 }] for (var i = 0; i < param.length; i++) { //设置文字基线 ctx.textBaseline = param[i].baseLne; ctx.font = '30px Arial'; ctx.fillText("Hello,world", 50, param[i].y); ctx.moveTo(0, param[i].y); ctx.lineTo(250, param[i].y); ctx.stroke(); } } </script> </html>
