6

私はこれの初心者であり、これまでJavaScriptを実際に行ったことがないので、あなたが私を助けてくれることを願っています。ユーザーがラジオボタンで形と色を選択できるキャンバスを作成し、それをキャンバスに描画します。選択した色にグラデーションを追加するオプションを備えたチェックボックスも追加しました。プログラムは次のとおりです：http： //people.dsv.su.se/~caak1743/Canvas/canvas.html

シェイプをキャンバス領域の周りでドラッグアンドドロップできるようにするために、これを作成する必要はありません。そして、プログラムで動作するように変更できると思うコードを見つけましたが、次のようになります。TypeError：次の行に対してnull init（無名関数）のメソッド'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;
4

4 に答える 4

17

次のように修正するだけです。

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

これはうまくいくはずです。問題は、キャンバス要素がスクリプトを実行する準備ができている必要があることです。<script>in<head>セクションはロードする前に実行されるため<canvas>、エラーが発生します。

于 2012-07-15T13:18:43.370 に答える
3

私は2つの解決策を見つけました。1 つ目は、jquery をページに追加することです。次に、js コード全体をラップして in-html js を使用する必要はありません

$(document).ready(function() { Your code here });

html の準備ができた後にコードを実行するもの、または in-html js を使用する必要がない場合(js より前に html を実行する) で、単に頭と体を交換するだけです。これらは機能するはずです。

于 2013-12-21T12:23:54.583 に答える
1

エラーを取り除くためにそれを行う必要があります。スクリプトの前にキャンバスを追加し、常にスクリプトを最後に配置します。

<body>
<canvas id="ca"></canvas>

<script type="text/javascript">

    var ca = document.getElementById("ca");
    var co = ca.getContext("2d");

// whatever your code    
</script>
</body>
于 2014-03-03T07:54:23.907 に答える
0

スクリプトがキャンバス要素の後にあることを確認してください。

于 2014-02-28T10:17:23.417 に答える