加载时不显示画布图像 [英] 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>
问题：
现在，问题是当页面加载时我调用函数，该函数使用圆弧绘制圆并在圆弧中绘制图像。但这不起作用。
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.
任何帮助将不胜感激。
推荐答案
这里的要点是，您必须等到图像加载后才能实际绘制它。
The point here is that you should have to wait until the image is loaded before actually draw it.
我的最佳选择是您的代码有效，是将所有画布绘图都包装到image.onload函数中，因为这样您可以确保在开始实际在其上进行绘图后即可对其进行渲染。
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.
我将代码发布到工作正常的 Plunkr
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>
这篇关于加载时不显示画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
