Canvas中绘制的文字，也可以设置文字的相关样式

    canvas 绘制文本 - 图1

    <!DOCTYPEhtml> <htmllang=“en”> <head> <metacharset=“UTF-8”> <metahttp-equiv=“X-UA-Compatible”content=“IE=edge”> <metaname=“viewport”content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> * { margin: 0; padding: 0; } canvas { border: 1pxsolidred; } </style> </head> <body> <canvaswidth=“800”height=“600”id=“myCanvas”> 对不起，您的浏览器版本过低，请升级浏览器！ </canvas> <script> // 获取元素 varmyCanvas = document.getElementById(“myCanvas”); // 需要新建一个类似PS中的画布，获取 canvas 的渲染上下文获得 varctx = myCanvas.getContext(“2d”); // 后续所有的操作都是在上下文进行 // 设置文字样式 ctx.fillStyle = “red” ctx.strokeStyle = “pink” ctx.font = “30px 微软雅黑” ctx.textAlign = “center” // 绘制文字 ctx.fillText(“文字内容”, 100, 100) ctx.strokeText(“文字内容”, 100, 200) </script> </body> </html>