Question

我在画布上绘制了各种形状和文字，但浏览器中没有显示任何内容。 Chrome控制台中没有错误。我在另一个浏览器中打开它，认为它可能是缓存的问题，但除了“绘制画布”按钮显示之外什么都没有。这里是jsfiddle：https://jsfiddle.net/0Lakv2do/

        <!DOCTYPE html>
<html lang="en">
<head>


    <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #content-wrapper {
                width: 600px;
                margin: 0 auto;
                text-align: center;
            }
            #canvasRun {
                background-color: #c00;
                border: 0;
                color: #fff;
            }

        </style>

</head>
<body>
    <div id="content-wrapper">
        <button id="canvasRun">Draw Canvas</button><br><br>
        <canvas id="myCanvas" width="600" height="450"></canvas>
    </div>
    <script type="text/javascript">

        var contentWrapper = document.getElementById('contentWrapper');
        var runButton = document.getElementById('canvasRun'); 
        var canvas = document.getElementById('myCanvas');
        myCanvas.style.visibility="hidden";

        runButton.addEventListener('click', showCanvas, false);

        function showCanvas() {

            myCanvas.style.visibility = "visible";
            if (myCanvas.getContext){

            var logo = new Image();
            logo.src = 'IIT_SAT_stack_186_white.png';

            function renderMyCanvas() {
                var ctx = canvas.getContext('2d');


                var linearGrad = ctx.createLinearGradient(0,0,0,450);

                linearGrad.addColorStop(0, 'white');
                linearGrad.addColorStop(1, 'black');

                ctx.fillStyle=linearGrad;
                ctx.fillRect(0,20,600,450);

                ctx.font = "32px sans-serif";
                ctx.fillStyle = 'red';
                ctx.fillText("ITMD 565 Canvas Lab", 135, 75);

                ctx.beginPath();
                ctx.moveTo(15, 90);
                ctx.lineTo(580, 90);
                ctx.lineWidth = 3;
                ctx.strokeStyle = 'red';
                ctx.closePath();
                ctx.stroke();

                ctx.font = "14px sans-serif";
                ctx.fillStyle = 'white';
                ctx.fillText("", 15, 410);
                ctx.fillText("", 15, 430);

                ctx.drawImage(logo, 300, 360, 250, 60);

                ctx.fillStyle= 'white';
                ctx.fillRect(250, 250, 310, 100);

                  var x = canvas.width / 2;
                  var y = canvas.height / 2;
                  var radius = 75;
                  var startAngle = 1.1 * Math.PI;
                  var endAngle = 1.9 * Math.PI;
                  var counterClockwise = false;

                  ctx.beginPath();
                  ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
                  ctx.lineWidth = 15;

                  ctx.arc.strokeStyle = 'yellow';
                ctx.stroke();

                ctx.setLineDash([10, 10]);
                ctx.beginPath();
                ctx.moveTo(270,300);
                ctx.quadraticCurveTo(330, 220, 395, 300, 395, 300);
                ctx.strokeStyle = 'black';
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(395, 300);
                ctx.quadraticCurveTo(450, 375, 540, 300);
                ctx.strokeStyle = 'black';
                ctx.stroke();

            }

        }

        }

    </script>
</body>
</html>

Answer 1

您刚刚在其他功能中复制/粘贴了功能，但您无法调用它。您还有一个不同的变量canvas，而在外部变量myCanvas。

复制/粘贴时，请确保您确实知道要复制的内容及其工作原理。

查看删除了函数定义的Fiddle，并修改变量名称。

为什么我的画在画布上没有显示？

1 个答案: