关于fill？
来源：7-2 编程练习
慕标5156652
2020-07-28 17:01:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background-color: cadetblue;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.arc(250, 250, 100, 0, 2 * Math.PI, true);
//ctx.fill();
ctx.clip();
ctx.fillStyle = "pink";
ctx.fillRect(150, 150, 100, 100);
ctx.fill();
// ctx.beginPath();
// ctx.fillStyle = "blue";
// ctx.fillRect(250, 150, 100, 100);
// ctx.fill();
// ctx.beginPath();
// ctx.fillStyle = "orange";
// ctx.fillRect(150, 250, 100, 100);
// ctx.fill();
// ctx.beginPath();
// ctx.fillStyle = "red";
// ctx.fillRect(250, 250, 100, 100);
// ctx.fill();
</script>
</body>
</html>
这样的效果为什么是这样啊 ?
这里的fill我有点晕了
设置fil() 整个区域都会覆盖 不设置fill() 就只会覆盖fillRect()
1回答
-
好帮手慕久久
2020-07-28
同学你好，问题解答如下：
fill是填充，所以写ctx.fill()时，会将整个圆，都填充成粉色：
由于fillRect本身就是绘制矩形并填充的意思，所以此处只使用ctx. fillRect就行，如下：
此时效果如下：
由于使用了裁切“ctx.clip()”，所以填充的矩形只显示，位于粉色圆内的部分，如下：
同学可以试着理解一下。
祝学习愉快！
0
相似问题
回答 2