jjzjj

javascript - 类型错误:无法调用 null 的方法 'getContext'(匿名函数)

coder 2024-07-27 原文

我是这方面的初学者,之前没有真正使用过任何 JavaScript,所以我希望你能帮助我。我制作了一个 Canvas ,让用户可以使用单选按钮选择形状和颜色,然后将其绘制到 Canvas 上。我还添加了一个复选框,其中包含为所选颜色添加渐变的选项。这是程序: http://people.dsv.su.se/~caak1743/Canvas/canvas.html

现在我不想让形状可以在 Canvas 区域周围拖放。而且我发现了一个代码,我认为可以对其进行更改以在我的程序中工作,但我不断得到: 类型错误:无法调用 null 的方法“getContext” 在里面 (匿名函数)对于行:

     var ctx = canvas.getContext("2d");

我不知道哪里出了问题,也不知道该如何解决。我曾尝试寻找具有类似问题的类似程序,但没有找到任何我可以在这里应用的程序。这是我试图合并到我的代码中的代码:

    function init() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
    }

    function draw() {
    clear();
    ctx.fillStyle = "#FAF7F8";
    rectangle(0,0,WIDTH,HEIGHT);
    ctx.fillStyle = "#444444";
    rectangle();
    }

    function myMove(e){
    if (dragok){
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    }
    }

    function myDown(e){
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
    canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
    e.pageY > y -15 + canvas.offsetTop){
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    dragok = true;
    canvas.onmousemove = myMove;
    }
    }

    function myUp(){
    dragok = false;
    canvas.onmousemove = null;
    }

    init();
    canvas.onmousedown = myDown;
    canvas.onmouseup = myUp;

最佳答案

只需将其更正为以下内容:

<script type="text/javascript">
window.onLoad=function(){ init();};
  function init() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
  }

  function draw() {
    clear();
    ctx.fillStyle = "#FAF7F8";
    rectangle(0,0,WIDTH,HEIGHT);
    ctx.fillStyle = "#444444";
    rectangle();
  }

  function myMove(e) {
    if (dragok) {
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
    }
  }

  function myDown(e) {
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
        canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
        e.pageY > y -15 + canvas.offsetTop) {
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
      dragok = true;
      canvas.onmousemove = myMove;
    }
  }

  function myUp() {
    dragok = false;
    canvas.onmousemove = null;
  }

  init();
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
</script>

这应该有效。问题是 Canvas 元素需要准备好运行脚本。自 <script><head>部分在加载 <canvas> 之前运行它给出了错误。

关于javascript - 类型错误:无法调用 null 的方法 'getContext'(匿名函数),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10660150/

有关javascript - 类型错误:无法调用 null 的方法 'getContext'(匿名函数)的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  5. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点,但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter,它工作正常,但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件,它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  6. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou

  7. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  9. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  10. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索,但这不是我需要的。我也看过ruby​​-doc.org,但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗?更新我用methods()方法做了实验,得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

随机推荐