10-使用锥形渐变_cesium entities创建圆锥添加渐变色-CSDN博客

本文链接：https://blog.csdn.net/gaowxx/article/details/144929843

10-使用锥形渐变_哔哩哔哩_bilibili10-使用锥形渐变是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第11集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.videopod.episodes&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=11

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/createConicGradient

gradient.addColorStop 添加0.5位置的颜色，可以使起始和终点颜色一致：

gradient.addColorStop(0, 'pink')
gradient.addColorStop(1, 'skyblue')

gradient.addColorStop(0, 'pink')
gradient.addColorStop(0.5, 'skyblue')
gradient.addColorStop(1, 'pink')

【完整代码】

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    // 1.创建canvas标签
    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)
    // 2.得到context对象
    const context = canvas.getContext('2d')

    // 锥形渐变
    // 3.1 创建渐变对象
    // 第一个参数其实是一个弧度值(Math.PI =3.1415926...)，如果想要以角度(Math.PI = 180°)来计算，需要通过(Math.PI / 180)进行转换
    // const gradient = context.createConicGradient(0,100,100)
    const gradient = context.createConicGradient(45 * (Math.PI / 180),100,100)
    // 3.2 给渐变的颜色
    // gradient.addColorStop(0, 'pink')
    // gradient.addColorStop(1, 'skyblue')
    gradient.addColorStop(0, 'pink')
    gradient.addColorStop(0.5, 'skyblue')
    gradient.addColorStop(1, 'pink')
    // 3.3 作为context的颜色
    context.fillStyle = gradient

    context.fillRect(0,0,200,200)


</script>

</html>