这样做对吗?

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

这样做对吗?

来源：5-7 编程练习

沧海的雨季

2018-09-30 07:22:44

<!DOCTYPE html>

<html>

<head>

<title>canvas渐变</title>

<style>

canvas{background-color:black;}

</style>

</head>

<body>

<canvas id="canvas" width="800px" height="800px">您的浏览器不支持</canvas>

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

//在此处补充代码

var gradient = context.createRadialGradient(500, 150, 0, 400, 150, 100);

gradient.addColorStop(0.1,"white");

gradient.addColorStop(0.2,"red");

gradient.addColorStop(0.6,"white");

gradient.addColorStop(1,"black");

context.fillStyle=gradient;

context.arc(400,150,100,0,Math.PI*2,true);

context.fill();

</script>

</body>

</html>

写回答

2回答

谁还不是个小宝贝了哼

2018-10-19

已采纳

<!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 ctx=canvas.getContext("2d");
//在此处补充代码
ctx.arc(300,300,200,0,2*Math.PI,true);
var RadialGradient=ctx.createRadialGradient(495,300,5,300,300,200);
RadialGradient.addColorStop(0,"rgba(255,255,255,0.7)");
        RadialGradient.addColorStop(0.1,"rgba(255,0,0,0.8)");
        RadialGradient.addColorStop(0.7,"rgba(255,255,255,0.5)");
        RadialGradient.addColorStop(1,"rgba(0,0,0,0.1)");
        ctx.fillStyle=RadialGradient;

ctx.fill();
</script>
</body>
</html>