关于stroke()?
来源：5-4 编程练习
慕标5156652
2020-07-27 23:04:11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
var ctx = canvas.getContext("2d");
var RadiaGradient = ctx.createRadialGradient(255, 255, 80, 255, 255, 150);
RadiaGradient.addColorStop(0, "rgb(21,231,32)");
RadiaGradient.addColorStop(0.2, "yellow");
RadiaGradient.addColorStop(0.6, "orange");
RadiaGradient.addColorStop(1, "pink");
ctx.fillStyle = RadiaGradient;
ctx.arc(255, 255, 150, 0, 2 * Math.PI, true);
ctx.fill();
// ctx.stroke();
</script>
</body>
</html>
没有最后一行ctx.stroke();的时候是这样的
有ctx.stroke();的时候是这样的
为什么会多一个边框呢？
1回答
-
好帮手慕夭夭
2020-07-28
同学你好，因为ctx.stroke()这个方法本身就是用来绘制路径的，虽然没有写 moveTo() 和 lineTo()，但是它默认会绘制一条黑色的路径。这里不需要ctx.stroke()，把它去掉即可哦。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题