一.画文字
代码如下：
<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}</style><body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas> <script>var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');//设置字体大小样式ctx.font = '100px 宋体';//设置字体颜色ctx.fillStyle = 'gold';//文字内容和位置ctx.fillText("hello", 250, 250);//绘制空心文字ctx.strokeStyle = 'purple';ctx.strokeText('你好', 0, 250);ctx.fillStyle = 'pink';//当前区域最大宽度为300pxctx.fillText("hello canvas!!", 100, 100, 300);</script></body>
结果如下：
二.画渐变文字
代码如下：
<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}</style><body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas> <script>var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');//设置字体样式ctx.font = '100px 宋体';//设置线性渐变var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);//从0到整个区域的一半由黄渐变到蓝//从中间到最后由蓝渐变到红gradient.addColorStop('0', 'yellow');gradient.addColorStop('0.5', 'blue');gradient.addColorStop('1.0', 'red');//应用渐变，空心文字ctx.strokeStyle = gradient;ctx.strokeText('Hello Canvas!!!', 0, 300, 500);//实心文字ctx.fillStyle = gradient;ctx.fillText('Hello World!!!', 0, 100, 500);</script></body>
结果如下：
三.调整文字位置
代码如下：
<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}</style><body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas> <script>var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');//画直线ctx.beginPath();ctx.moveTo(250, 0);ctx.lineTo(250, 500);ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo(0, 250);ctx.lineTo(500, 250);ctx.stroke();ctx.closePath();//设置字体样式ctx.font = '100px 宋体';//设置水平文字的位置//ctx.textAlign = 'end'; 默认为startctx.textAlign = 'center';//设置垂直文字的位置//ctx.textBaseline = 'top';ctx.textBaseline = 'middle';ctx.fillText("Hello", 250, 250);</script></body>
结果如下：
