<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>
我正在尝试将渐变放入圆中，问题是圆只是绿色，渐变松散了蓝色，或者渐变不起作用。谢谢。
最佳答案
这是因为渐变在圆开始之前就结束了：
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();<canvas id="mycanvas" width="800" height="600" style="border: 1px solid black;">
</canvas>