canvas-文字

最新推荐文章于 2024-07-11 14:21:16 发布

十里夜

最新推荐文章于 2024-07-11 14:21:16 发布

阅读量737

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/hgyu_962464/article/details/54893145

版权

本文通过HTML5的canvas元素，展示了如何设置字体样式、描边与填充文字、以及实现文字在画布上的水平和垂直居中对齐。示例代码详细地解释了每个步骤，包括设置字体大小、颜色以及坐标参考点的调整。

摘要由CSDN通过智能技术生成

<!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.strokeStyl

最低0.47元/天解锁文章

十里夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-文字

canvas-文字 #canvas{ border: 1px solid palevioletred; } window.onload = function (){ //获取到canvas元素 var canvas = document.getElementBy
复制链接

扫一扫

专栏目录