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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

268閲覧

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

littlestream

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2019/01/01 07:01

編集2019/01/01 07:27

JavaScript

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>canvasで図形を描く</title> 6 7<script type="text/javascript"> 8<!-- 9 10 11var minX= new Array(240); 12var maxX= new Array(240); 13 14function horizonline(con,x1,y1,x2,y2,col) 15{ 16 var x; 17 18 for(x=x1;x<x2;x++) 19 { 20 pset(con,x,y1,col); 21 } 22 con.fill(); 23} 24 25function pset(con,x,y,col) 26{ 27 //色を指定する 28 con.fillStyle = col; 29 30 //(x,y)から1,1の大きさのドットを描く 31 con.fillRect(x,y,1,1); 32 con.fill(); 33} 34 35function DrawFlatTriangle(con,x1,y1,x2,y2,x3,y3,col) 36{ 37 var x=0,y=0; 38 var x3=new Array(3); 39 var y3=new Array(3); 40 x3[0]=x1;//ここらへんなんとかならないだろうか、 41 y3[0]=y1;//java scriptには 42 x3[1]=x2; 43 y3[1]=y2; 44 x3[2]=x3; 45 y3[2]=y3; 46 47 var maxY,minY; 48 var i; 49 50 //左から20上から40の位置に、幅50高さ100の四角形を描く 51 //context.fillRect(20,40,50,100); 52 53 Edge(con,x3[0],y3[0],x3[1],y3[1],'#FF0000');//線を引きながらX軸の最小値と最大値を左側と右側で 54 Edge(con,x3[0],y3[0],x3[2],y3[2],'#00FF00');//求めるサブルーチンを呼んでいる 55 Edge(con,x3[1],y3[1],x3[2],y3[2],'#0000FF'); 56 con.fill(); 57 58 minY=Math.min(y3);//最小値をminYに入れる 59 maxY=Math.max(y3);//最大値をmaxYに入れる 60 61 for(y=minY;y<maxY;y++)//Y軸の最小値から最大値まで+1し続ける 62 { 63 con.beginPath(); 64 con.strokeStyle = '#FF0000';//線の色 65 con.moveTo(minX[y],y); //元となる座標 66 con.lineTo(maxX[y],y); // 線を引き描画する 67 con.stroke(); 68 con.fill(); 69 } 70 71} 72 73function Edge(con,x1,y1,x2,y2,col) 74{ 75 var i=0; 76 var x,y; 77 78 for(i=0;i<1024;i++) 79 { //固定小数点で10bit幅をとる事で0.0~1.0を線形補完する 80 81 x=(x1*(1024-i)+x2*i)>>10; 82 //元の計算式はx=(x1*(1.0-i)+x2*i); 83 //(Yも同様)だが小数が遅いと困るので固定小数点にしている 84 y=(y1*(1024-i)+y2*i)>>10; 85 86 if(minX[y]>x) 87 { 88 //xがminX[]より小さいなら 89 minX[y]=x;//代入 90 } 91 if(maxX[y]<x) 92 { 93 //xがmaxX[]より大きいなら 94 maxX[y]=x;//代入 95 } 96 pset(con,x,y,col);//点を打つ 97 } 98 con.fill(); 99} 100 101function sample() 102{ 103 var x1=10; 104 var y1=20; 105 var x2=120; 106 var y2=220; 107 var x3=200; 108 var y3=230; 109 110 //描画コンテキストの取得 111 var canvas = document.getElementById('sample1'); 112 if (canvas.getContext) 113 { 114 115 var context = canvas.getContext('2d'); 116 117 118 for(i=0;i<240;i++) 119 { 120 minX[i]=+50000;//最小値を最大値(まではいかないもののありえない(はずの)大きい値にしている 121 maxX[i]=-50000;//最大値を最小値(以下同文 122 } 123 124 horizonline(context,30,80,120,40,'#FF0000'); 125 DrawFlatTriangle(context,x1,y1,x2,y2,x3,y3,'#ff0000'); 126 //三角形をサブルーチン 127 128 context.fill(); 129 while(1)//無限ループせずに終える(今後のkeyなどで動的に動かす際の課題) 130 { 131 break; 132 } 133 } 134} 135--> 136</script> 137 138</head> 139<body onLoad="sample()"> 140<h2>canvasで図形を描く</h2> 141<canvas id="sample1" style="background-color:black;" width="320" height="240"> 142図形を表示するには、canvasタグをサポートしたブラウザが必要です。 143</canvas> 144</body> 145</html>

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

イメージ説明

bochan2👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

投稿2019/01/01 09:26

編集2019/01/01 09:28
littlestream

総合スコア35

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 08:02

coco_bauer

総合スコア6915

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

littlestream

2019/01/01 08:30

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

2019/01/01 09:46

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問