                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS实现人机大战之五子棋（UI篇）

createRadialGradient

这个怎么设置API的，在w3c上也看不明白为什么，求大神详解

宝慕林2917688

2017-04-12

源自：JS实现人机大战之五子棋（UI篇） 2-4

关注问题我要回答

1194

操作

收起

2 回答

宝慕林2917688 提问者
2017-04-14

这个我知道，但渐变过程怎么演示，还有渐变部分怎么截取

0 回复有任何疑惑可以回复我~

收起回答

qq_振宇_03649113
2017-04-13

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>来自菜鸟教程的代码</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<div>
x0 :   渐变的开始圆的 x 坐标    </br>
y0 :   渐变的开始圆的 y 坐标    </br>
r0 :   开始圆的半径    </br>
x1 :   渐变的结束圆的 x 坐标    </br>
y1 :   渐变的结束圆的 y 坐标    </br>
r1 :   结束圆的半径    
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
</script>

</body>
</html>