HTML5 Canvas-fillRect()与rect()

苏拉卜

在下面的代码中,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();

在Chrome中测试过| 小提琴

fillRect

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

因此,如果您使用多个.fillStyle命令发出多个.fillRect命令,则每个新的rect都将被前面的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是画布的path命令的一部分。

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

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

因此,如果在路径中发出多个.rect命令和多个.fillStyle命令,则所有.rect都将仅使用最后一个.fillStyle。

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()

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章