Canvas/Js 不可见

Question

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

我的 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" />

Answer 1

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