Question

我正在尝试创建一个输入表单，该表单将使用信息使用它来绘制使用画布的简单形状。

我让它在codecademy测试环境中工作，但我无法弄清楚如何调出控制台，所以我尝试将其迁移到codepen.io，这样我就可以在需要时获得一些输出以进行故障排除。复制后，它不再绘制形状。有什么我想念的吗？

这是我正在使用的脚本。我试过逐行评论，但无济于事。我也尝试过使用jsfiddle，结果相同。

$(document).ready(function (){
    //Initialize canvas
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    //Draw settings

    //draw circle!
    function draw() {
        var x = document.getElementById('x').value
        console.log(x)
        var y = document.getElementById('y').value
        var radius = document.getElementById('radius').value
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, 40, 0, Math.PI);
        context.stroke();
    }

    setInterval(draw, 10);
});

http://codepen.io/whole_kernel/pen/XKRZVV

Answer 1

因为jquery。您正在尝试使用已定义为jquery的函数。将其添加到头部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 2

另一个答案表明您通过链接该文件来使用jQuery。

而不是使用jQuery替换

$(document).ready(function(....

带

window.addEventListener("load",function(....

它做同样的事情，您的页面将加载并运行得更快。为什么只为一行代码加载整个接口。

画布在一个环境中绘制，而不是在另一个环境中

2 个答案: