canvas-文字

2024-04-27 15:08:10

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>canvas-文字</title>    <style>        #canvas{            border: 1px solid palevioletred;        }    </style>    <script>      window.onload = function (){          //获取到canvas元素          var canvas = document.getElementById('canvas');          //获取canvas中的画图环境          var context = canvas.getContext('2d');         //设置字体的大小格式          context.font="50px 黑体";          //描边字体          //显示文字 .strokeText('文字内容',显示位置X坐标,显示位置Y坐标,显示文字所占的宽度（可省：不做限制）);          context.strokeText('何问起',50,50);          //填充字体 .fillText('文字内容',显示位置X坐标,显示位置Y坐标,显示文字所占的宽度（可省：不做限制）);          context.fillText("何问起",300,50,50);          //即填充又描边 字体          //设置描边属性          context.strokeStyle = 'green';          //设置描边线条的宽度          context.lineWidth = 5;          context.strokeText('何问起',150,480);          //设置填充属性          context.fillStyle = 'orange';          context.fillText("何问起",150,480);          //设置文字在该坐标点，怎么居中/如何对齐          //设置坐标参考点          context.fillRect(250,250,10,10);          //设置水平居中 主要属性：left,right,center          context.textAlign = 'center';          //设置上下居中 主要属性：top,bottom,middle          context.textBaseline = 'middle';          context.lineWidth = 1;          context.font='100px 楷体';          context.strokeText('梅',250,250);      }    </script></head><body>    <canvas id="canvas" width="500px" height="500px">    </canvas></body></html>

上一篇：canvas-圆形

下一篇：canvas-圆弧