我已经按照以下方式使用 arc 创建了 Circle。

var startAngle = 0;
var arc = Math.PI / 6;
var ctx;

var leftValue=275;
var topValue=300;	
	   
var wheelImg = ["http://i.stack.imgur.com/wwXlF.png","http://i.stack.imgur.com/wwXlF.png","cat.png","cock.png",
				"croco.png","dog.png","eagle.png","elephant.png","lion.png",
				"monkey.png","rabbit.png","sheep.png"];

function drawWheelImg()
{
	var canvas = document.getElementById("canvas");
  	if(canvas.getContext)
	{
		var outsideRadius = 260;
		var textRadius = 217;
		var insideRadius = 202;

		ctx = canvas.getContext("2d");	

		for(var i = 0; i < 12; i++)
		{
			var angle = startAngle + i * arc;

			ctx.beginPath();
			ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
			ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true);
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
			ctx.shadowBlur=3;
			ctx.shadowColor="#A47C15";
			ctx.stroke();
			ctx.closePath();
			
			ctx.save();
			ctx.translate(leftValue + Math.cos(angle + arc / 2) * textRadius,
						topValue + Math.sin(angle + arc / 2) * textRadius);
			ctx.rotate(angle + arc / 2 + Math.PI / 2);
			var img = new Image();
			
			img.src = wheelImg[i];
			ctx.drawImage(img,-44, -25,50,40);
			ctx.restore();
		}
  	}
}	



function spin()
{
	drawWheelImg();
}

drawWheelImg();

<button class="btnSpin" onclick="spin();">Spin</button>

<canvas id="canvas" width="550" height="580"></canvas>

问题是它不会在第一页加载时加载。但是当我点击旋转按钮时，它会加载所有图像。

不知道是什么问题。非常感谢任何帮助。

注意: Here in the question img.onload 函数解决了同样的问题，但仅适用于单个图像。如果数组中有多个图像，则它不起作用。

最佳答案

您想预加载图像。

为此，您可以在收盘前在页面底部开始加载 </dody>标签。

<script>
    // an array of image URLs
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames];
    // an array of images 
    var images = [];
    // for each image name create the image and put it into the images array
    imageNames.forEach(function(name){
        image = new Image();   // create image
        image.src = name;      // set the src
        images.push(image);    // push it onto the image array
    });
</script>         

在使用图像的代码中，您只需要检查它们是否已加载。为此，只需检查图像 complete属性。

// draw the first image in the array
if(images[0].complete){  // has it loaded
    ctx.drawImage(images[0],0,0);  // yes so draw it
}

注意 complete并不意味着加载。如果您证明了错误的 URL 或存在其他错误，则完整标志仍然为真。完成意味着浏览器已经完成对图像的处理。您将必须添加 onload图像有可能失败时的事件。

处理错误

如果您不确定图像是否不会加载，您将不得不设计一种策略来处理丢失的内容。您将需要回答这样的问题，我的应用程序可以在没有图像的情况下运行吗？是否有其他来源可以从中获取图像？有没有办法确定这种情况可能发生的频率？我该如何阻止这种情况发生？

在最简单的级别上，您可以通过在 onload 期间将自己的信号量添加到图像对象来将图像标记为已加载。事件

    // an array of image URLs
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames];
    // an array of images 
    var images = [];
    // function to flag image as loaded
    function loaded(){
        this.loaded = true;
    }
    // for each image name create the image and put it into the images array
    imageNames.forEach(function(name){
        image = new Image();   // create image
        image.src = name;      // set the src
        image.onload = loaded; // add the image on load event
        images.push(image);    // push it onto the image array
    });

然后在代码中，您将在使用图像之前检查加载的信号量。

// draw the first image in the array
if(images[0].loaded){  // has it loaded
    ctx.drawImage(images[0],0,0);  // yes so draw it
}

关键内容

如果您有应用程序运行所需的图像，那么在加载图像时出现问题时，您应该重定向到错误页面。您可能有多个服务器，因此您也可以在放弃之前尝试不同的来源。

如果您需要停止该应用程序或尝试其他 URL，您将必须拦截 onerror图片事件。

为了简化图像的使用(100% 确保在该应用程序运行时加载图像)，您应该仅在加载所有图像时才启动使用图像的部分。一种方法是计算所有正在加载的图像，并在图像加载时倒计时。当计数器归零时，您知道所有图像都已加载，然后您可以调用您的应用程序。

以下将加载图像，如果它们失败，它将尝试另一个服务器(源)，直到没有更多选项，此时您应该重定向到适当的错误页面以通知客户端猴子已将 Spanner 放入作品。它会计算加载的图像，当所有图像都已加载后，它将开始运行应用程序，确保所有图像内容都可以安全使用。

    // Server list in order of preferance
    var servers = ["https://fakesiteABC.com/", "http://boogusplace.com/", "http://foobarpoo.com.au/"];

    // an array of image URLs
    var imageNames = ["image1.png", "image2.jpg", ...moreImageNames];
    // an array of images 
    var images = [];
    // loading count tracks the number of images that are being loaded
    var loadingImageCount = 0;
    // function to track loaded images
    function loaded(){
        loadingImageCount -= 1;
        if(loadingImageCount === 0){
              // call your application start all images have loaded
              appStart();
        }
    }
    // function to deal with error
    function loadError(){  // the keyword "this" references the image that generated the event.
        if(this.retry === undefined){  // is this the first error
            this.retry = 1;   // point to the second server
        }else{
            this.retry += 1;  // on each error keep trying servers (locations)
        }
        // are the any other sources to try?
        if(this.retry >= servers.length){  // no 11
            // redirect to error page.
            return;
        }
        // try a new server by setting the source and stripping the 
        // last server name from the previous src URL
        this.src = servers[this.retry] + this.src.replace( servers[ this.retry - 1],"");
        // now wait for load or error
    }


    // for each image name create the image and put it into the images array
    imageNames.forEach(function(name){
        image = new Image();   // create image
        image.src = servers[0] + name;      // set the src from the first server
        image.onload = loaded; // add the image on load event
        image.onerror = loadError; // add the image error handler
        images.push(image);    // push it onto the image array
        loadingImageCount += 1; // count the images being loaded.
    });

还有许多其他策略可用于处理丢失的内容。这只是展示了一些使用的机制，并没有定义一个完美的解决方案(没有)

关于javascript - 多个图像未加载到 Canvas 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34596526/