麻烦老师检查，谢谢

来源：5-7 编程练习

qq_慕移动3101913

2020-03-02 14:26:07

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas渐变</title>
    <style>
        canvas{background-color:black;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800px" height="800px">您的浏览器不支持</canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        //在此处补充代码
        // 径向渐变
        var radialGradient = context.createRadialGradient(500,200,0,400,200,100);

        //给渐变添加颜色
        radialGradient.addColorStop(0,'#b4aaaa');
        radialGradient.addColorStop(.3,'#c91515');
        radialGradient.addColorStop(.8,'#7f7f7f');
        radialGradient.addColorStop(1,'rgb(109,109,109,.2)');

        //设置渐变作为样式
        context.fillStyle = radialGradient;
        context.arc(400,200,100,0,Math.PI * 2, true);
        context.fill();
       
    </script>
</body>
</html>

写回答

1回答