Question

这里我试图使用多个弧形来制作圆形。如下：

＆＃13;

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

＆＃13;

<button class="btnSpin" onclick="spin();">Spin</button>

<canvas id="canvas" width="550" height="580"></canvas>

＆＃13;

问题：

现在，问题是当页面加载我调用函数时，它使用弧绘制圆并将图像绘制到弧中。但那不起作用。

如果我在按钮上调用相同的功能，那么它就能工作并显示图像。

我发现很多，但没有得到解决方案。不知道为什么图像不会在负载上显示。

任何帮助都会非常感激。

Answer 1

这里的要点是你必须等到图像加载后再实际绘制它。

为了让你的代码正常工作，我的最佳选择是将所有画布绘图包装到image.onload函数中，因为通过这种方式，你可以确定一旦你开始实际绘制它就会渲染它。 / p>

我在有效的Plunkr

上发布了这些代码

＆＃13;

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

＆＃13;

<!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>

＆＃13;

加载时不显示画布图像

1 个答案: