老师，差点味道，求解！

来源：5-7 编程练习

weixin_慕设计6449438

2019-06-10 21:47:01

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{background-color:black; margin:20px 500px;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"> //内部设置画布的大小
您的浏览器不支持canvas
</canvas>
<script>
var canvas=document.querySelector("#canvas"); //获取画布
var ctx=canvas.getContext('2d'); //调用里面的内容

//第一步：径向颜色的绘制
var radialcolor=ctx.createRadialGradient(380,300,20, 300,300,100); //起点的圆的圆心的x,y，半径，结束位置的圆的圆心的x,y，半径

radialcolor.addColorStop(0,'white');
radialcolor.addColorStop(0.3,'red');
radialcolor.addColorStop(0.8,'gray');
//第二部：径向颜色的应用，传递给fillStyle
//ctx.translate(300,300); //下移将原点移动到原来图形的正中间
ctx.arc(300,300,100,0, 2*Math.PI,true); //第二步画个圆哦
ctx.lineWidth=0.01;
ctx.fillStyle= radialcolor;
ctx.fill();
ctx.stroke();
</script>
</body>
</html>

写回答

1回答