个人中心
gpt4 book ai didi

Javascript Canvas 图像并不总是加载

转载 作者：行者123 更新时间：2023-11-29 23:19:31 25 4
gpt4 key购买 nike

<分区>

有时我的图片会在我第一次访问该页面时加载，而其他时候我必须刷新它们才能加载。此外，有时会加载一张图片而不是另一张图片。

//Store everything in arrays
var dimgs = ["hair-1", "head-1"]; //Name of classes for imgs
var cans = ["hairimg", "headimg"]; //Canvas element names
var dcans = ["chairimg", "cheadimg"]; //Canvas names
var dctxs = ["ctxa", "ctxb"]; //Context names
var defimgs = []; //Images found

//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
    if(p != null) {
       getcan(p);
    }
}

//Function to create Canvas and draw image
function getcan(p) {
    defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
    var x;
    if(p != null) {
       defimgs[p].onload = (function(x){
          dcans[x] = document.getElementById(cans[x]);
          dctxs[x] = dcans[x].getContext('2d');
          dcans[x].width = defimgs[x].naturalWidth;
          dcans[x].height = defimgs[x].naturalHeight;
          dctxs[x].drawImage(defimgs[x], 0, 0);
       }(p));
    }
}

我也试过以下方法，结果相同:

//Store everything in arrays
var dimgs = ["hair-1", "head-1"]; //Name of classes for imgs
var cans = ["hairimg", "headimg"]; //Canvas element names
var dcans = ["chairimg", "cheadimg"]; //Canvas names
var dctxs = ["ctxa", "ctxb"]; //Context names
var defimgs = []; //Images found

//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
    if(p != null) {
       defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
       dcans[p] = document.getElementById(cans[p]);
       dctxs[p] = dcans[p].getContext('2d');
       dcans[p].width = defimgs[p].naturalWidth;
       dcans[p].height = defimgs[p].naturalHeight;
       getcan(p);
    }
}

//Function to draw image
function getcan(p) {
    var x;
    if(p != null) {
       defimgs[p].onload = (function(x){
          dctxs[x].drawImage(defimgs[x], 0, 0);
       }(p));
    }
}

HTML:

<div>
  <canvas id="hairimg" style="border: 1px solid #000;"></canvas>
</div>
<div>
  <canvas id="headimg" style="border: 1px solid #000;"></canvas>
</div>
<div class="hair-1"">
  <img src="hair.png" alt="User Image">
</div>
<div class="head-1"">
  <img src="head.png" alt="User Image">
</div>

我只是不知道使用 div 类将多个图像加载到 canvas 上的正确方法，每个图像都在 div 标签中>.

25 4 0
文章推荐： php - mysql_fetch_array()/mysql_fetch_assoc()/mysql_fetch_row()/mysql_num_rows 等...期望参数 1 是资源
文章推荐： javascript - Webpacker 不检测文件 javascript/packs/application.js 中的导入函数
文章推荐： javascript - 在哪里可以找到 Google Maps API 库源代码？
文章推荐： php - Logcat 显示解析错误 : syntax error, 意外 ':' in C :\wamp\www\signup. php 第 2 行。使用 php 和 mysql 登录和注册表单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com