Canvas image not display when load

问题

Here i am trying to make circle using multiple arc shape. like following:

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";

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 imgName = wheelImg;
			var img = new Image();
			
			img.src = wheelImg;
			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>

Problem:

Now, issue is when page load i call function which draw circle using arc and draw image in to the arc. But that not working.

And if i call same function on button click then it works and display image.

I found lot but didn't get the solution. Don't know why image not display on load.

Any help would greatly appreciated.

回答1:

The point here is that you should have to wait until the image is loaded before actually draw it.

My best option, in order to get your code working, is to wrap all the canvas drawing into an image.onload function, because in this way you can be sure it will be rendered once you start actually drawing on it.

I post you the code on a working Plunkr

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";

function drawWheelImg() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        var imgName = wheelImg;
        var img = new Image();
        img.src = wheelImg;

        img.onload = function() {
            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);
                ctx.drawImage(img, -44, -25, 50, 40);
                ctx.restore();
            }
        }
    }
}

drawWheelImg();

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <canvas id="canvas" width="550" height="400"></canvas>
    <script src="script.js"></script>
  </body>

</html>

来源：https://stackoverflow.com/questions/34441361/canvas-image-not-display-when-load

标签

javascript

html

canvas