- ベストアンサー
CANVASで網目模様を描く方法を教えて下さい
babu_babooの回答
- babu_baboo
- ベストアンサー率51% (268/525)
#1 です。 球体の曲線をあきらめて投稿。 分割線を増やせばなんとか。 でもサンプル図のようにするには回転が必要なようです。 <!DOCTYPE html> <meta charset="UTF-8"> <title>3D</title> <style> canvas { background : #ddd; } </style> <body> <canvas width="1024" height="512"></canvas> <script> //3Dの物体を多角形の平面の集合（配列）として考える //平面は、[x,y,z]の座標をn個もった配列として考える //平面の各頂点の順序は反時計周りとする //多角柱 function prism (r, h, n, n1) { var rst = [], top = [], btm = [], bx = [], bz = []; var k = 2 * Math.PI / n; var h1 = h / n1, h2 = h / 2; var i, j, s, x, y, z; var xl, xr, yt, yb, zf, zb; //前処理として高さ(h)を無視してn角形のxとzを求める for (i = s = 0; i <= n; i++) { bx[i] = x = Math.sin (s) * r; bz[i] = z = Math.cos (s) * r; top[i] = [x, h2, z];//上部 btm[i] = [x, -h2, z];//下部 s += k; } rst.push (top);//最初に上部を登録 //側面の四角形の平面を作る yt = h2; for (i = 0; i < n1; i++) { yb = yt - h1; x = bx[0]; z = bz[0]; for (j = 1; j <= n; j++) rst.push ([ [x, yt, z], [x, yb, z],//左上,左下 [x = bx[j], yb, z = bz[j]], [x, yt, z] //右下,右上 ]); yt = yb; } rst.push (btm.reverse ());//下部を登録 return rst; } function ball (r, n, n1) { var rst = [], bx = [], bz = []; var k = 2 * Math.PI / n1; var i, j, s, yr, yt, yb; for (i = s = 0; i <= n1; i++) { bx[i] = Math.sin (s); bz[i] = Math.cos (s); s += k; } yr = 0; yt = r; for (i = 1; i <= n; i++) { yr2 = Math.sin (180 / n * i * Math.PI / 180) * r; yb = Math.cos (180 / n * i * Math.PI / 180) * r; for (j = 0; j < n1; j++) rst.push ([ [bx[j] * yr, yt, bz[j] * yr], [bx[j] * yr2, yb, bz[j] * yr2], [bx[j+1] * yr2, yb, bz[j+1] * yr2], [bx[j+1] *yr, yt, bz[j+1] * yr] ]); yt = yb; yr = yr2; } return rst; } //各x,y,z座標に移動する関数 function move3D (m, x, y, z) { var rst = []; var s0, s1, buf; while (s0 = m.shift ()) { buf = []; while (s1 = s0.shift ()) { s1[0] += x; s1[1] += y; s1[2] += z buf.push (s1); } rst.push (buf); } return rst; } //3Dの物体を2Dの座標へと変換する function cov3to2 (m, zz, sc) { var rst = []; var s0, s1, buf, s, i; for (i = 0; s0 = m[i++]; ) { buf = []; while (s1 = s0.shift ()) { s = (zz + s1[2]) / sc; s1[0] /= s; s1[1] /= s; buf.push (s1); } rst.push (buf); } return rst; } //描く function draw (c, a, o) { var ctx = c.getContext ('2d'); var ox = c.width / 2 + o[0]; var oy = c.height / 2 + o[1]; var b, p; ctx.lineWidth = 1; ctx.strokeStyle = 'rgb(0,0,0)'; for (var i = 0; b = a[i++]; ) { p = (b[2][0] - b[1][0]) * (b[0][1] - b[1][1]) - (b[2][1] - b[1][1]) * (b[0][0] - b[1][0]); if (p <= 0) { ctx.beginPath (); ctx.moveTo (ox + b[0][0], oy + b[0][1]); for (j = 1; p = b[j++]; ) { ctx.lineTo (ox + p[0], oy + p[1]); } ctx.lineTo (ox + b[0][0], oy + b[0][1]); ctx.stroke(); } } } draw ( document.querySelector ('canvas'), cov3to2 (move3D (prism (4, 9, 24, 10), 0, 8, 0), 30, 500), [200, -200] ); draw ( document.querySelector ('canvas'), cov3to2 (move3D (ball (7, 18, 36), 0, 8, 0), 30, 500), [-200, -200] ); </script>
関連するQ&A
- 網目模様のグラディーション
ワードで グラディーションの円形を作成したいのですが 先方の注文でグレー表示ではなく ドットの荒い網目模様での グラディーションが必要とのことで 作成するソフトを探しています。 イラストレーターをチャレンジしたのですが 網目模様はグラディーションのカラーでは選択できず いろいろ考えてワードで作成して プリンタ出力を300dpiで出したものを スキャナで読み取り 画像として貼り付け 解像度を600dpiにしたので 容量がかなり増えましたが… 他に方法はないでしょうか
- ベストアンサー
- 画像・動画・音楽編集
- イラストレーターで水面の網目模様
IllustratorCS3を使用しています。（Photoshop7もあります） よくプールや海の水面などで見かける光の反射などでできる網目模様というか蜂の巣模様というか（表現がうまくできなくてすみません）を描きたいのですが良い方法はないでしょうか？よろしくお願いいたします。
- 締切済み
- その他(ソフトウェア)
- スタート時に画面が網目模様で点滅します。
ThinkPad E575を使ってます。近頃、電源を入れると画面が赤、白。青の不規則な網目模様になってしまい、スタート画面と交互に点滅します。右下のをマウスでクリックしてシャットダウンしています。しばらくしてから、電源をいれると網目模様が出なくなります。 ほぼ、毎日、網目模様が出てしまいますが、そろそろ寿命でしょうか。2年ぐらい前に家電量販店の開店のチラシで並んで買った掘り出し物でした。 改善方法があれば教えていただけましたら幸いです。 ※OKWAVEより補足：「Lenovo：ノートブック(ThinkPad)」についての質問です。
- ベストアンサー
- ノートPC
- ワード： 表のセルにパターン（模様）を入れたい
ワードで表を作成しています。 セルに色付けする方法はわかるのですが、 たとえば、添付は ”テキストボックス”ですが、 色付けすると同時に、パターン（模様）を選択できます。 ワードでも、同じようにしたいのですが、不可能でしょうか？ ワードが英語版ですみません…。 方法があれば教えてください。 ワードの用語は日本語で構いません。
- ベストアンサー
- Word（ワード）
- 棒針 透かし編みの編み目記号について
編み目記号が、本に載っていないので困っています。 ほかのサイトなどで調べてもこのような編み目記号は載っていませんでした。 添付した模様編みの符号図の下から７段目、 トの逆向きの記号です。 「右上２目一度」とは違いますよね。 縦斜め線は１升だけですし、横斜め線は２升です。 流れ的に減らし目だろうとは思うのですが、 どういう意味なのでしょうか？ よろしくお願いします。
- ベストアンサー
- 手芸・裁縫
- 模様編み（ボッブル？）
棒針でアラン模様を編んでいます。 添付の、ボッブル編み？ですが、5目に分けるのと、5目一度は表目で編むのしょうか？ その間の段の編目は裏目なので、裏目で編むのでしょうか？ よろしくお願いします。
- 締切済み
- その他（ホビー・玩具）
- しま模様がでるのはどうして。
NECのLaVieM550/5のディスプレイ、２年半使ってきましたが、最近矢印を囲む正方形の縦じま模様の影ができます。アイコンにも同じような影が付きます。画像にもしましまが現れます。起動画面では、縦じまができます。 寿命なのでしょうか。どなたか教えてください。
- 締切済み
- ノートPC
- 朝日のような模様の作り方【photoshop】
初めて書き込みさせていただきます。 添付した画像のように背景に２色（水色と青色）が切り替わる模様をpshotoshopの機能で簡単につくる方法はありますでしょうか 時計の針の動きのように円を描くように出来上がる模様とでもいいましょうか このような感じの正式な模様の名前があるようでしたら いっしょに教えていただければ幸いです。 よろしくお願いします。
- ベストアンサー
- デザイナー・クリエイティブ職