canvas基本学习(圆环图，文本类，线条样式)（二）

飞熊 • 2023年7月14日下午4:47 • 前端开发 • 阅读 159

 function draw(){
        var canvas = document.getElementById("canvas")//获取canvas对象（画布）
        var ctx = canvas.getContext("2d")//获取对应的画笔对象，获得 2d 上下文对象
        canvas.width = 800
        canvas.height = 600

        // 绘制文本
        // canvas 提供了两种方法来渲染文本:
        // fillText(text, x, y [, maxWidth])
        // 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
        // strokeText(text, x, y [, maxWidth])
        // 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
        // 一个填充文本的示例 图1
        ctx.font = "48px serif";
        ctx.fillText("心情很美丽",50,200,200)
        // 一个文本边框的示例 图2
        ctx.font = "48px serif";
        ctx.strokeStyle = "red"
        ctx.textAlign = "left" //文本对齐选项. 可选的值包括：start,end,left,right or center.默认值是 start，以xy坐标为参考点进行对齐。
        ctx.textBaseline = "hanging" //基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic
        ctx.direction = "rtl" //文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
        ctx.strokeText("心情很美丽",300,200,200)
        //预测量文本宽度
        var text = ctx.measureText("心情很美丽"); // TextMetrics object
        console.log(text.width) //240
        
        // 线型
        ctx.lineWidth = 15
        ctx.lineCap = "round" //lineCap值决定了线段端点显示的类型butt，round 和 square。默认是 butt。
        ctx.beginPath()
        ctx.moveTo(100,300)
        ctx.lineTo(300,300)
        ctx.strokeStyle = "green"
        ctx.stroke()
        ctx.closePath()

        // 环形，可以用于显示百分比
        ctx.lineCap = "round" //lineCap值决定了线段端点显示的类型butt，round 和 square。默认是 butt。
        //先画一个圆环
        ctx.beginPath()
        ctx.arc(400,300,40,(Math.PI/180)*360,(Math.PI/180)*0,true)
        ctx.moveTo(100,300)
        ctx.lineTo(300,300)
        ctx.strokeStyle = "#eee"
        ctx.stroke()
        //再画占比数
        ctx.beginPath()
        var percent = 0.75
        var startAngle = 360*percent //计算开始角度
        ctx.arc(400,300,40,(Math.PI/180)*startAngle,(Math.PI/180)*0,true)
        ctx.moveTo(100,300)
        ctx.lineTo(300,300)
        ctx.strokeStyle = "#FCCA42"
        ctx.stroke()
        ctx.closePath()
    }
    draw()