Блог

Главная - Вопросы по программированию - Код, выполняемый в Codepen, не работает с vscode

Код, выполняемый в Codepen, не работает с vscode

#visual-studio-code #local #codepen

#visual-studio-code #Местные новости #codepen

Вопрос:

Коды Javascript работают в codepen, но когда я тестирую его с помощью vscode, фигуры не отображаются, а кнопка загрузки не работает, поэтому коды javascript не работают.

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;
});

Ответ №1:

Не уверен, почему вы не можете этого сделать. Ниже приведен код для справки

 <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>

Комментарии:

1. с кодом js проблем нет. проблема в том, что этот код работает в codepen, но не работает на моем компьютере

2. VSCode — это текстовый редактор, такой же, как Блокнот в Windows. Вам нужно сохранить файл как HTML-файл (возможно myfile.html ) и открыть файл в браузере (Chrome, Firefox и т. Д.), Чтобы увидеть результат.

3. да, я попробовал это сейчас, это сработало. Но мне просто нужно добавить часть загрузки в мой код, но это так не работает.

4. const canvas = document.getElementById(‘canvas’); const download = document.getElementById(‘btnDownload’); download.addEventListener(‘click’, функция (e) { console.log(canvas. toDataURL()); var link = document.createElement(‘a’); link.download = ‘загрузить.png’; link.href = холст. toDataURL(); link.click(); ссылка. удалить; });

5. (Я пытаюсь сохранить другой холст)