[英]Code running in Codepen does not work on vscode
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;
});
不知道為什么你不能這樣做。 下面是代碼供您參考
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.