cnvas 抽奖转盘弧形文字

LDC-2AN1

已于 2022-11-13 14:14:51 修改

阅读量1.1k

点赞数

分类专栏： web前端文章标签：前端 canvas uni-app

于 2022-01-15 09:39:46 首次发布

本文链接：https://blog.csdn.net/placebo1996/article/details/122506131

版权

网上搜索了其他实现方法，有svga 和 jquery 的 arctext.js

这在vue项目和uniapp里都不好操作

转盘上的礼物可以通过定位实现，但文字需要弧度只能通过canvas

h5 demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas id='canvas' width="450px" height="450px" style="width: 40%;height: 40%;">canvas not supports</canvas>

    <script>
        let canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),

            TEXT_FILL_STYLE = 'rgba(100, 130, 240, 0.5)',
            TEXT_STROKE_STYLE = 'rgba(200, 0, 0, 0.7)',
            TEXT_SIZE = 14,

            circle = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                radius: 180
            },

            startAngle = Math.PI * 2 + Math.PI / 2 + Math.PI / 17 - Math.PI * 1 / 8,
            endAngle = Math.PI * 2 + Math.PI / 2 -