Question

<head>
    <title></title>
</head> 

<body>
    <canvas id="mycanvas" width="800" height="600" style="border: 1px solid black;">
        upload yor browser old man!
    </canvas>

    <script type="text/javascript">

        var c = document.getElementById("mycanvas");
        var cxt = c.getContext( "2d" );

        grad = cxt.createLinearGradient( 0 , 0 , 200 , 200 );

        grad.addColorStop( 0 , "blue" );
        grad.addColorStop( 1 , "green" );

        cxt.fillStyle = grad;
        cxt.arc( 400 , 300 , 250  , 0 , Math.PI * 2 , true );
        cxt.fill();
    </script>

</body>

我试图将渐变放入圆圈，问题是圆圈只是绿色渐变松散蓝色或者渐变不起作用。谢谢。

Answer 1

这是因为你的渐变在你的圆圈开始之前就结束了：

＆＃13;

        var c = document.getElementById("mycanvas");
        var cxt = c.getContext( "2d" );

        grad = cxt.createLinearGradient( 0 , 0 , 200 , 200 );

        grad.addColorStop( 0 , "blue" );
        grad.addColorStop( 1 , "green" );

        cxt.fillStyle = grad;
        cxt.rect(0,0,c.width, c.height);
        cxt.fill();
        cxt.strokeStyle = "#000";
        cxt.arc( 400 , 300 , 250  , 0 , Math.PI * 2 , true );
        cxt.fill();
        cxt.stroke();

＆＃13;

<canvas id="mycanvas" width="800" height="600" style="border: 1px solid black;">
    </canvas>

＆＃13;

Answer 2

您的渐变工作正常.. 尝试更改渐变开始和结束坐标，例如......

grad = cxt.createLinearGradient( 275, 175, 525, 425);

..以便渐变位于圆圈内。

渐变到圆圈

2 个答案: