質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

三角形を塗りつぶして描くサブルーチンで動かすと(x1,y1)から(x2,y2)までの線は描画されます。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 551

score 29

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>

<script type="text/javascript">
<!--


var minX= new Array(240);
var maxX= new Array(240);

function horizonline(con,x1,y1,x2,y2,col)
{
    var x;

    for(x=x1;x<x2;x++)
    {
        pset(con,x,y1,col);
    }
    con.fill();
}

function pset(con,x,y,col)
{
    //色を指定する
    con.fillStyle = col;

    //(x,y)から1,1の大きさのドットを描く
    con.fillRect(x,y,1,1);
    con.fill();
}

function DrawFlatTriangle(con,x1,y1,x2,y2,x3,y3,col)
{
    var x=0,y=0;
    var x3=new Array(3);
    var y3=new Array(3);
    x3[0]=x1;//ここらへんなんとかならないだろうか、
    y3[0]=y1;//java scriptには
    x3[1]=x2;
    y3[1]=y2;
    x3[2]=x3;
    y3[2]=y3;

    var maxY,minY;
    var i;

    //左から20上から40の位置に、幅50高さ100の四角形を描く
    //context.fillRect(20,40,50,100); 

    Edge(con,x3[0],y3[0],x3[1],y3[1],'#FF0000');//線を引きながらX軸の最小値と最大値を左側と右側で
    Edge(con,x3[0],y3[0],x3[2],y3[2],'#00FF00');//求めるサブルーチンを呼んでいる
    Edge(con,x3[1],y3[1],x3[2],y3[2],'#0000FF');
    con.fill();

    minY=Math.min(y3);//最小値をminYに入れる
    maxY=Math.max(y3);//最大値をmaxYに入れる

    for(y=minY;y<maxY;y++)//Y軸の最小値から最大値まで+1し続ける
    {
             con.beginPath();
             con.strokeStyle = '#FF0000';//線の色
             con.moveTo(minX[y],y);    //元となる座標
             con.lineTo(maxX[y],y);  // 線を引き描画する
             con.stroke();
             con.fill();
    }

}

function Edge(con,x1,y1,x2,y2,col)
{
    var i=0;
    var x,y;

    for(i=0;i<1024;i++)
    {    //固定小数点で10bit幅をとる事で0.0~1.0を線形補完する

        x=(x1*(1024-i)+x2*i)>>10;
        //元の計算式はx=(x1*(1.0-i)+x2*i);
        //(Yも同様)だが小数が遅いと困るので固定小数点にしている
        y=(y1*(1024-i)+y2*i)>>10;

        if(minX[y]>x)
        {
            //xがminX[]より小さいなら
            minX[y]=x;//代入
        }
        if(maxX[y]<x)
        {
            //xがmaxX[]より大きいなら
            maxX[y]=x;//代入
        }
        pset(con,x,y,col);//点を打つ
    }
    con.fill();
}

function sample() 
{
    var x1=10;
    var y1=20;
    var x2=120;
    var y2=220;
    var x3=200;
    var y3=230;

    //描画コンテキストの取得
    var canvas = document.getElementById('sample1');
  if (canvas.getContext)
  {    

    var context = canvas.getContext('2d');


    for(i=0;i<240;i++)
    {
        minX[i]=+50000;//最小値を最大値(まではいかないもののありえない(はずの)大きい値にしている
        maxX[i]=-50000;//最大値を最小値(以下同文
    }

    horizonline(context,30,80,120,40,'#FF0000');
    DrawFlatTriangle(context,x1,y1,x2,y2,x3,y3,'#ff0000');
    //三角形をサブルーチン

    context.fill();
    while(1)//無限ループせずに終える(今後のkeyなどで動的に動かす際の課題)
    {
         break;
    }
  }
}
-->
</script>

</head>
<body onLoad="sample()">
<h2>canvasで図形を描く</h2>
<canvas id="sample1" style="background-color:black;" width="320" height="240">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>

結果だけ書くと上手く動きません。何しろ今日になってブラウザだけで動く(はずの)JavaScriptの
グラフィック命令だけネットでサンプルやリファレンスを見ながら使い始めたので
どこが致命的におかしいのか分からないのです。ちなみに、私はフラットシェーディング
(コンスタントシェーディング)の3DエンジンをC/C++とWINAPIと高速に描画できるDIBSection
で作った事があります。
エラーメッセージはどこで確認すればいいか分からないです。
問題の発生した環境は、google chromeです。OSはWindows10 CPUはIntel Core i3です。

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

イメージ説明
自己解決しました。
どこがおかしかったかというと、alertでminYとmaxYを
メッセージーボックスでデバッグしたら値が無いみたいだったので
Math.minとMath.maxを真っ先に疑いました。
すると、配列の中身の最小値や最大値を求めるには
minY=Math.min.apply(null,配列名);
maxY=Math.max.apply(null,配列名);
とするネット上の記事に書いてありました。
これで解決しました。ありがとうございました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

三角形が描画されないのは、DrawFlatTriangle関数の第6引数と第7引数(x3,y3)が使われることなくnew Array(3)に置き換えられているからだと思われます。コードの下記の箇所を見直してください。

function DrawFlatTriangle(con,x1,y1,x2,y2,x3,y3,col)
{
    var x=0,y=0;
    var x3=new Array(3);
    var y3=new Array(3);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/01 17:30

    早速の回答ありがとうございます。
    我ながら迂闊なミスタイプをしていました。気が付かなければ一日中迷っていたかもしれないです。
    ありがとうございました。あともう1つ、疑問点があるのですが、
    DrawFlatTriangle関数の中心部分である
    for(y=minY;y<maxY;y++)//Y軸の最小値から最大値まで+1し続ける
    {
    horizonline(con,minX[y],y,maxX[y],y,'#FF0000');
    con.fill();
    }
    と直したのですが塗りつぶされないのは何故でしょうか?我儘言ってすみません。

    キャンセル

  • 2019/01/01 18:46

    自分でもどこが悪いのか調べてみて分かったので我儘言ってすみませんでしたが、自己解決しました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る