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です。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。