Javascript Canvas/Js不可见

我想画一幅画布。我的控制台没有显示任何问题。但是，画布没有显示，我无法找到错误，也没有在存档中找到类似的答案。如果有人能给我一个提示，我将不胜感激。这里是js.fiddle：

我的JS代码：

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        console.log(ctx);
        ctx.strokeStyle = '28d1fa';
        ctx.lineWidth = 17;
        ctx.lineCap = 'round';
        ctx.shadowBlur = 15;
        ctx.shadowColor = '28d1fa';

        function degtoRad(degree) {

            var factor = Math.PI / 180;
            return degree * factor;
        }

        function donutChart() {
            var record = 1200; // equal to 100% or 360°
            var average = 120;
            var income = 127;
            var target = 170;

            //Background
            gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
            gradient.addColorStop(0, '09303a');
            gradient.addColorStop(1, 'black');
            ctx.fillStyle = gradient;
            ctx.fillStyle = '#1adda4';
            ctx.fillRect(0, 0, 500, 500);

            // Record
            ctx.beginPath();
            ctx.arg(250, 250, 200, degtoRad(270), degtoRad(360 - 90));
            ctx.stroke();

            // Average
            ctx.beginPath();
            ctx.arg(250, 250, 170, degtoRad(270), degtoRad((average / record * 360) - 90));
            ctx.stroke();

            //Income
            ctx.beginPath();
            ctx.arg(250, 250, 140, degtoRad(270), degtoRad((income / record * 360) - 90));
            ctx.stroke();

            // target
            ctx.beginPath();
            ctx.arg(250, 250, 110, degtoRad(270), degtoRad((target / record * 360) - 90));
            ctx.stroke();


            // Income
            ctx.font = "25px Arial";
            ctx.fillStyle = '28d1fa';
            ctx.fillText(income, 175, 250);

            //Target
            ctx.font = "15px Arial";
            ctx.fillStyle = '28d1fa';
            ctx.fillText(target, 175, 280);

        }

        var dataURL = canvas.toDataURL();

        document.getElementById('myImage').src = dataURL;

HTML:

  <canvas class="panel_block" id="canvas" width='500' height="500"></canvas>
    <img id="myImage" />

在我看来，你的画布是可见的，你只是没有给它一个与网页不同的背景。

一些打字错误：你从来没有调用

donutChart

函数，你忘记了渐变色停止之前的

，它是

ctx.arc

而不是

ctx.arg

谢谢。现在它起作用了…@Amber Smith我不知道你为什么投反对票。我告诉过你为什么它“不可见”。你的代码没有绘制，因为你从来没有调用过你的函数，而且里面的颜色无效。我是论坛的新手，甚至没有投票的可能。。。对不起，不是我@CalebBlack猜测您的答案为何被否决（顺便说一句，这要求最低声誉为125，正如解释的那样）：虽然可能是正确的，但它没有回答问题，也没有解决代码失败的原因（各种拼写错误），最后，您回答了一个拼写错误问题。SO的目标是建立一个知识库，不仅对提问者有用，而且纠正拼写错误不太可能做到这一点。这不仅仅是拼写错误的问题。我也没有调用这个函数。然而，在这个世界上，不仅有专家，一些打字错误对你来说可能是直觉，但对我来说却不是…@AmberSmith答案仍然没有说明为什么代码一开始就不起作用。就像我说的；这些都是猜测。