gpt4 book ai didi

javascript - 为什么这些 Canvas 不渲染?

转载 作者:行者123 更新时间:2023-11-30 18:54:12 26 4
gpt4 key购买 nike

我正在创建一个网络应用程序,允许用户通过指定 RGB 值输入多种颜色。提交后,用户将看到一个 Canvas , Canvas 上有一个以所选颜色绘制的实心矩形。

在这个页面上,我有 7 个 Canvas 。第一个画得很好,但其余的都没有出现。浏览器是Safari。相关代码如下:

首先是 header 中的脚本元素,它定义了我用来绘制到 Canvas 上的函数。

<script language="JavaScript" TYPE="text/javascript"><!--
function drawCanvas(canvasId, red, green, blue) {
var theCanvas = document.getElementById("canvas" + canvasId);

var context = theCanvas.getContext("2d");

context.clearRect(0,0,100,100);
context.setFillColor(red,green,blue,1.0);
context.fillRect(0,0,100,100);
}
// -->
</script>

接下来是 HTML 源代码,其中我有我的 Canvas 标签和一些嵌入式 Javascript 来调用我的 drawCanvas 函数

<canvas id="canvas0" width="100" height="100">
</canvas>


<script language="JavaScript" TYPE="text/javascript"><!--
drawCanvas(0,250,0,0);
// -->
</script>
.
. //more source
.
<canvas id="canvas1" width="100" height="100">
</canvas>


<script language="JavaScript" TYPE="text/javascript"><!--
drawCanvas(1,4,250,6);
// -->
</script>

还提供了屏幕截图。如您所见,“红色” Canvas 出现得很好,但第二个应该是绿色的 Canvas 根本没有出现。有任何想法吗? alt text

最佳答案

setFillColor 解释颜色值的方式有些奇怪——将第二次调用更改为 drawCanvas(1,0,250,0)(而不是最后三个参数的 4, 250, 6),绿色 Canvas 显示得很好(在显示本地 HTML 文件时—— @Chetan 的建议对于加载速度不是 的页面来说是值得的,但它不能解决您的问题;-)。这在 Safari 和 Chrome 中都会发生。不幸的是我找不到 setFillColor 的文档(即将到来的 HTML5 标准使用不同的方法并且似乎没有定义这样的方法)所以我无法检查这是否是一个 webkit 错误(webkit 是 Safari 和 Chrome 都用于渲染的) 或者 args setFillColor 想要的不同!

编辑:我做了一些实验,它似乎希望 RGB 分量在 0.0 到 1.0 范围内,不是0 到 255。将对 setFillColor 的调用更改为:

 context.setFillColor(red/256,green/256,blue/256,1.0);

因此看起来工作得很好。

关于javascript - 为什么这些 Canvas 不渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2762908/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com