canvas绘制文本和清除绘制

M78_国产007

已于 2022-07-24 01:37:50 修改

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas操作文章标签： html5 javascript 前端

于 2022-07-23 13:46:42 首次发布

本文链接：https://blog.csdn.net/m0_59345890/article/details/125943429

canvas操作专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在HTML5 canvas上使用fillText和strokeText绘制文本，展示了文本颜色、字体设置以及对齐方式，并详细讲解了clearRect方法用于清除绘制区域。通过实例演示了如何结合这些技术提升图表的可读性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绘制文本

绘制文本的方法有两种：fillText和strokeText

fillText()有五个参数，第一个参数为绘制内容(字符串)，第二个参数为起点x轴坐标，第三个参数为起点y轴坐标后两个参数可选，为最大宽度和最大高度。

strokeText类似,但是它无填充，简单来说就是文字不能被修改颜色。

文本颜色使用fillStyle属性指定

文本字体使用font属性指定：font:"字体大小字体样式"，两个值缺一不可。

textAlign属性指定水平方向对齐方式；

属性值有：start、left、center、right、end

textBaseline则指定垂直方向。

属性值有：top、hanging、middle 、alphabetic、ideographic、bottom

学会绘制文本后，我们完善一下昨天写的柱状图。

 <style>
        #cav{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="cav" width="500" height="400"></canvas>
    <script>
        var cav =document.querySelector("#cav")
        var ctx= cav.getContext("2d")
        ctx.moveTo(50,350)
        ctx.lineTo(450,350)
        ctx.stroke()
        //假数据
        arr=[500,600,800,700,500,800]
        arr1=["一季度","二季度","三季度","四季度","最低季度","最高季度",]
        //设置最大高度
        var maxh=300/Math.max(...arr)
        for (let i = 0; i < arr.length; i++) {
            ctx.beginPath()
            ctx.font="14px weiruanyahei"
            ctx.fillStyle="purple"
            ctx.rect(80+i*60,350-maxh*arr[i],50,maxh*arr[i])
            ctx.fillText(arr1[i],85+i*60,370)
            ctx.fillText(arr[i],90+i*60,350-maxh*arr[i]-10)
            ctx.fill()
        }
        
    </script>

效果：

清除绘制

clearRect() 方法清空给定矩形内的指定像素

有四个参数：

第一个参数为矩形的左上角顶点的x轴坐标；

第二个参数为矩形的左上角顶点的y轴坐标；

第三个参数为矩形的宽度；

第四个参数为矩形的高度。

代码演示一下：

    <canvas id="cav" width="400" height="400"></canvas>

<script>
    var cav=document.querySelector("#cav")
    var cxt=cav.getContext("2d")
    //设置填充色
    cxt.fillStyle="pink"
    //创建一个填充颜色的矩形
    cxt.fillRect(100,100,100,200)
    //清除一半
    cxt.clearRect(100,100,100,100)

运行代码后可以看到创建的矩形被清除了一半