HTML5画布中fillRect()和rect()的差别是什么?

  • 回答 (2)
  • 关注 (0)
  • 查看 (31)

在下面的代码中,fillStyle如果我改变了,第二个覆盖了第一个中指定的颜色rect(),然后fill()在两个位置(即两个矩形都是绿色)但是按预期工作(即,第一个矩形是蓝色,第二个矩形是绿色)第一个rect()fillRect()。为什么这样?我认为fillRect()只是rect()然后fill()

ctx.translate(canvas.width/2, canvas.height/2);

ctx.fillStyle = "#5A9BDC";
ctx.fillRect(0, 0, rectWidth, rectHeight);
// ctx.rect(0, 0, rectWidth, rectHeight);
// ctx.fill();    

ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.fillStyle = "#31B131";
ctx.rect(0, 0, rectWidth, rectHeight);
ctx.fill();
宅女宅女提问于
婷槟沃回答于

据我所知,画布上有3个“矩形”功能:fillRectstrokeRectrect

ctx.rect(0,0,rectWidth,rectHeight); // create some shape, there is nothing on the canvas yet
ctx.stroke(); // draw stroke of the shape
ctx.fill();   // fill the shape

有两个简短的例子:

ctx.strokeRect(0,0,rectWidth,rectHeight); // shortcat to stroke rectangular
ctx.fillRect(0, 0, rectWidth, rectHeight); // shortcat to fill rectangular

所以,fill调用可以只填充创建的形状rect

KKKCobain......回答于

fillRect

.fillRect是一个“独立”命令,用于绘制和填充矩形。

因此,如果使用多个.fillStyle命令发出多个.fillRect命令,则每个新的矩形都将填充上一个fillstyle。

ctx.fillStyle="red";
ctx.fillRect(10,10,10,10);  // filled with red

ctx.fillStyle="green";
ctx.fillRect(20,20,10,10);  // filled with green

ctx.fillStyle="blue";
ctx.fillRect(30,30,10,10);  // filled with blue

矩形

.rect是画布路径命令的一部分。

路径命令是以beginPath()开始并且一直持续到发出另一个beginPath()的图形组

在每个组中,只有最后一个样式命令获胜。

因此,如果在路径内发出多个.rect命令和多个.fillStyle命令,则只有最后一个.fillStyle将用于所有.rect。

ctx.beginPath();  // path commands must begin with beginPath

ctx.fillStyle="red";
ctx.rect(10,10,10,10);  // blue

ctx.fillStyle="green";
ctx.rect(20,20,10,10);  // blue

ctx.fillStyle="blue";  // this is the last fillStyle, so it "wins"
ctx.rect(30,30,10,10);  // blue

// only 1 fillStyle is allowed per beginPath, so the last blue style fills all

ctx.fill()

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励