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

Canvas draws in one environment, not the other

本文关键字：环境 另一个 绘制 一个 Canvas      更新时间：2023-09-26

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

我让它在codecademy的测试环境中工作，但我不知道如何启动控制台，所以我尝试将它迁移到codependency。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

这是因为jquery。您正在尝试使用jquery定义的函数。添加到head:

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

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

而不是使用jQuery替换

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


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

它做同样的事情，你的页面会加载和运行得更快。为什么要为一行代码加载整个界面呢?

相关文章：