createRadialGradient-慕课网

首页课程实战体系课手记专栏慕课教程

createRadialGradient

来源：2-4 画棋子

宝慕林2917688

2017-04-12 10:58

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

写回答关注

2回答

宝慕林2917688

2017-04-14 10:58:41

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

0 0

qq_振宇_03649113: 2017-04-13 15:18:27

<!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>

0 1

JS实现人机大战之五子棋（UI篇）

利用js及canvas绘图知识，实现程序界面编写和交互逻辑处理

35650 学习 · 136 问题

查看课程

相似问题

index.js:33 Uncaught TypeError: Failed to execute 'createRadialGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.

回答 1

打开慕课网App查看更多内容