在 Codepen 中运行的代码不适用于 vscode

Question

Javascript codes work on the codepen, but when I test it with vscode, the shapes do not appear and the download button does not work, so javascript codes do not work. Javascript 代码在 codepen 上工作，但是当我用 vscode 测试它时，形状没有出现并且下载按钮不起作用，所以 javascript 代码不起作用。

https://codepen.io/rebelchris/pen/rNevrXg https://codepen.io/rebelchris/pen/rNevrXg

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const download = document.getElementById('download');

// Cirlce
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

// Triangle
ctx.beginPath();
ctx.moveTo(200, 75);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

// Hearth
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();

download.addEventListener('click', function(e) {
  console.log(canvas.toDataURL());
  var link = document.createElement('a');
  link.download = 'download.png';
  link.href = canvas.toDataURL();
  link.click();
  link.delete;
});

Answer 1

Not sure why you're unable to do it.不知道为什么你不能这样做。 Below is the code for your reference下面是代码供您参考

<html>
<head>
    <style>
        // Code in CSS part goes here...
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    
    <!-- Code under HTML goes here -->
    <canvas id="canvas" height="200"></canvas>
    <br />
    <button id="download">Download</button>

    <script>
        // Code under Javascript goes here
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const download = document.getElementById('download');

        // Cirlce
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.stroke();

        // Triangle
        ctx.beginPath();
        ctx.moveTo(200, 75);
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.fill();

        // Hearth
        ctx.beginPath();
        ctx.moveTo(75, 40);
        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
        ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
        ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
        ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
        ctx.stroke();

        download.addEventListener('click', function(e) {
            console.log(canvas.toDataURL());
            var link = document.createElement('a');
            link.download = 'download.png';
            link.href = canvas.toDataURL();
            link.click();
            link.delete;
        });
    </script>
</body>
</html>

在 Codepen 中运行的代码不适用于 vscode

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-11-13 14:30:26

在 Codepen 中运行的代码不适用于 vscode

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-11-13 14:30:26

解决方案1
0 已采纳 2020-11-13 14:30:26