1read 100read
2013年01月Web制作21: Canvasについて語ろう (227) TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
お前ら、HTML作成で心がけていること教えてください (609)
■□アクセス数増やしたいんだけど□■ｐａｒｔ ,１ (540)
SOHOやフリーで本当に細々と食ってる奴の68人目 (233)
【Overture】PPC広告7【AdWords】 (954)
ＷｉｎのＩＥ６はそろそろ見捨てていいですか？ (922)
【朝目】他力本願サイトが憎い【新聞】５ (581)

Canvasについて語ろう


1 ：2011/05/11 〜 最終レス ：2013/01/15
Canvasについて語りましょう
Canvas 2D API Specification 1.0
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
Canvas チュートリアル - MDC Docs
https://developer.mozilla.org/ja/Canvas_tutorial

2 ：
4.8.11 The canvas element ― HTML Standard
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
canvas 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
http://www.html5.jp/tag/elements/canvas.html
Canvas - HTML5.JP
http://www.html5.jp/canvas/index.html

3 ：
■関連スレ
【WHATWG】HTML5 Part3【W3C HTML WG】
http://hibari.2ch.net/test/read.cgi/hp/1295872957/
+ JavaScript の質問用スレッド vol.86 +
http://hibari.2ch.net/test/read.cgi/hp/1303790568/
【誰か】jQueryのここがわからない【助けて】
http://hibari.2ch.net/test/read.cgi/tech/1229881548/

4 ：
そして誰も語らないのであった
===========完===========

5 ：
語るにしてもcanvasについてより描画アルゴリズムについてだろうね

6 ：
そんな限定的な話題にしたらもっと廃れるぞｗ

7 ：
FAQっぽいものを充実させてください
　 ┌──┐
┌┴┐　 ├┐
│　 ├┬┘│
│┌┴┤　 │
└┤　 └┬┘
　 └──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか

8 ：
今やってる勉強が終わったらサンプル載せてってやるから待ってろ

9 ：
※デフォルトでは読み込んだ画像のデータをputImageData()できません
これさえなけりゃ気合いで何でもありにできるのにな

10 ：
間違えたgetだった

11 ：
>7は普通に３次元空間では可能
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる

12 ：
矩形や画像を2dで>>7みたいに配置するのは無理じゃないの
http://himajin.moe-nifty.com/photos/uncategorized/2007/10/18/damashi005.jpg
こういうだまし絵の立体みたいに
一部を切断して繋がってるように見せかけるような方法くらいしか思いつかないけどそれはもうベツモノだし

13 ：
と言ったものの
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか

14 ：
そういやgetContextの引数2dしかみたことないけど3dとかあるのかすら

15 ：
それぐらい日本語和訳みれば3dあるかどうかわかるだろ・・・

16 ：
ケンカうってんの？

17 ：
つ 'webgl'

18 ：
w3cが言ってたwebGLの致命的な欠陥ってどうなったんだ？
なんとかしてくんなきゃ手が出せないぜ

19 ：
(x1,y1) (x2,y2) (x3,y3) (x4,y4)の各四点に四隅が一致した画像ファイルを貼付けるにはどうすればいいでしょうか。
対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか？

20 ：
これモノクロにしたりするの時間かかるね

21 ：
age

22 ：
https://markup.mozilla.org/ja/#/
これなんかすげえな

23 ：
そのうちフォトショとかシーケンサの代わりになるサイトが出るな

24 ：
http://ultra-zone.net/canvas

25 ：
>>24
特におもしろみもないフツーのものでした

26 ：
<body style="background-color:silver;">
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "aqua";
ctx.fillRect(0, 0, 500, 500);
ctx.shadowColor = "blue";
ctx.shadowBlur = 100;
ctx.fillStyle = "lime";
ctx.fillRect(50, 50, 200, 200);
ctx.fillStyle = "red";
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.fill();
ctx.clearRect(150, 150, 200, 200);
</script>
</body>
赤い円の中を四角で切り抜いて
切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
あと下の緑の四角と水色の四角も切り抜いた赤い円の内側から見えるようにしたいです

27 ：
＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
これがどういう意味かよくわかんなからそれ以外の部分だけ
http://ideone.com/AZtYY

28 ：
>>27
レスありがとうございます
キャンバス二枚用意するんですね
> ＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
> これがどういう意味かよくわかんなからそれ以外の部分だけ
こういう意味です・・・伝わりますか
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.shadowColor = "red"; ctx.shadowBlur = 100;
ctx.fillStyle = "red";
ctx.arc(250, 250, 150, 0, Math.PI * 2, true); ctx.fill();
ctx.clearRect(150, 150, 200, 200);
ctx.shadowColor = "transparent"; ctx.shadowBlur = 0;
ctx.fillStyle = "aqua"; ctx.strokeStyle = "aqua";
ctx.beginPath(); ctx.moveTo(160, 130); ctx.lineTo(170, 140); ctx.moveTo(170, 130); ctx.lineTo(160, 140); ctx.stroke();
ctx.fillText("こっち側じゃなく", 180, 140);
ctx.fillStyle = "blue"; ctx.strokeStyle = "blue";
ctx.beginPath(); ctx.arc(165, 165, 5, 0, Math.PI * 2, true); ctx.stroke();
ctx.fillText("こっち側に", 180, 170); ctx.fillText("円の外側にある赤い影と", 180, 190); ctx.fillText("同じ影をつけたいです", 180, 210);
</script>
</body>

29 ：
切り抜き部分の透過はsave()、restore()使えばひとつのcanvasでできそうだけど無理かな

30 ：
>>28
var ctx = document.getElementById("canvas").getContext("2d");
ctx.shadowColor = "red";
ctx.shadowBlur = 100;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, false);
ctx.closePath();
ctx.moveTo(150, 150);
ctx.lineTo(150, 350);
ctx.lineTo(350, 350);
ctx.lineTo(350, 150);
ctx.closePath();
ctx.fill();

31 ：
rect()が時計回りに定義されてるから、円弧を反時計回りにして
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);
とシンプルにもできる
clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい

32 ：
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか？

33 ：
>>30-31
イメージ通りの結果です！ありがとうございますm(_ _)m
> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしに>>30のほうをtrueに、>>31のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます

34 ：
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これ理解できました
本当にどうもありがとうございます

35 ：
canvasで文字列を画像として出すのってどーやんの？

36 ：
https://developer.mozilla.org/ja/Drawing_text_using_a_canvas

37 ：
中が塗りつぶされた五芒星を描画しなさい

38 ：
fillText("★", 0, 0);

39 ：
>>38
想定してなかったが大正解だな

40 ：
https://developer.mozilla.org/ja/Canvas_tutorial/Using_images#section_7
> 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか？
コードが短くなるというだけで速度とかは逆に遅くなる？

41 ：
canvasの例文wikiみたいなのやれば儲かるよ今ならね

42 ：
MDCでおｋ
html5.jpでおｋ
ってのが世間の風潮

43 ：
そこらは例文というか解説
俺もやろうか考えたけど面倒くさいからやってない

44 ：
ブログでゲームの作り方の解説はしたが
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね

45 ：
そのゲーム解説はJavascriptすか

46 ：
canvasでsvg女子みたいに人体描画しようとした奴いる？

47 ：
x,y,zを渡すと直方体を描画する関数を作成しなさい。

48 ：
　　　　　　　　＼　　ヽ　　　　　! |　　　　 /
　　　　　＼　　　　ヽ　　　ヽ　　　　　　　/　　　　/　　 　 　 ／
　　　　　　　　お断りだああああああああああぁぁぁ！！
　　　　　　　　＼　　　　　　　　　　｜　 　 　 　 /　　　／
　　　　　　　　　 　 　 　 　 　 　 　 ,ｲ
￣　--　　=　＿　　　　　　　　 　 / |　　　　　　　　　　　　　 --'''''''
　　　　　　　　　　,,, 　 　 ,r‐､λノ　 ﾞi､_,､ﾉゝ　　　　　-　￣
　　　　　　　　　　　　　　ﾞl　　 　 　　 　 　 ﾞ､_
　　　　　　　　　　　　　 .j´　.　.ﾊ_, ,_ﾊ　　　（.
　　　　─　　　＿　　─ {　 　 (ﾟωﾟ　）　　 /─　　　＿　　　　　─
　　　　　　　　　　　　　　 ).　 c/　　 ,つ 　 ,l~
　　　　　　　　　　　　　 ´y　　｛ ,、 ｛　 　 <
　　　　　　　　　　　　　　 ゝ 　 lﾉ ヽ,)　　 ,

49 ：
>47
それはどのレベルまでやるんだ？
簡易設計図みたいに遠近法もなしの線だけでできた直方体か？
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる

50 ：
直方体っぽくなればどんなのでもよしとします。
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。

51 ：
関係ないけど画像のrgb値を調べる装置を作ったぜ
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=iro.html

52 ：
Canvasって数値配列に直接対応するフレームバッファを持っていたりするから、レンダリングは全部ソフトウエアでやるんですよね？
CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・
やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか？

53 ：
>>52
大きい面積を塗りつぶすなどする場合はかなり遅くなると思います。
IE9だとFirefox5とかに比べて速いのでハードウェアアクセラレーションが効いているのかもしれません。

54 ：
ttp://www.ibm.com/developerworks/jp/web/library/wa-html5fundamentals4/

55 ：
canvasに動的に画像を作らせたぜ！
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=syk.html

56 ：
>55
おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)ｲｲ

57 ：
それをやると無理やり変化させてるのがモロバレなんだぜ

58 ：
putImageData使えば、グラフィックソフト張りにいろいろできるじゃん、て思って実験してみました
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト
結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定
・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます
正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです
JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー

59 ：
Workerの使い方が下手なだけ

60 ：
ふむ
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生

61 ：
みんな似たようなこと考えてんな
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ

62 ：
IE9にしたらネイティブアプリ並になるよ

63 ：
いろいろ調べてた所、大きな数の添字アクセスって高コストなんですね
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました
置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね
そのあたりをうまくやれば改善できるかもです
IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、；

64 ：
webGLに欠陥が見つかったとき、IEが対応させてもねーのに懸念を表明した時は何様だと思った

65 ：
質問です
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。

66 ：
自己解決しました
function arcTxt(ctx,txt,x,y,font,style,align,arc,maxWidth){
ctx.textAlign = align;
ctx.fillStyle = style;
ctx.font = font;
if(arc > 0){
var rad = -1*arc*Math.PI/180;
var rad2 = arc*Math.PI/180;
var exX2 = exX*Math.cos(rad2) - exY*Math.sin(rad2);
var exY2 = exX*Math.sin(rad2) + exY*Math.cos(rad2);
ctx.rotate(rad);
...つづく

67 ：
つづき
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....

68 ：
訂正
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。

69 ：
2時間で自己解決する男の人って

70 ：
ザ他力本願

71 ：
>>37
>>38
過去ログから順番に見てたが爆笑したｗ

72 ：
audio + canvasでゲーム作ったぜ！
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=hos.html


73 ：
すげえけどソースが汚ねえ

74 ：
>>72
よく出来てるんだけど
ルールがいまいちわからん

75 ：
保守

76 ：
うは〜
audioで波形作ってcanvasで表示させたぜ〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=oto2.html

77 ：
すげー！
と思ってコード見たら読みづれぇぇ！
これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる？

78 ：
100px*100pxサイズの画像を用意して
pieceSize=100;
Canvasで ctx.drawImage(img, 0, 0,pieceSize,pieceSize);
IEで見てもグーグルクロムで見ても描かれた画像の縦横比がおかしなことになりました。
縦が3で横が1.4くらいの比率で画像が表示されました。
ctx.setTransform(0.745, 0, 0, 0.374, 0, 0);
としたら何とか100px*100pxの画像になりました。
CanvasのdrawImageを使うとき何か注意が必要なのでしょうか？
Canvasを紹介しているサイトでは綺麗にピクセル単位で指定できると書いてあったので戸惑っています。

79 ：
>>78
面倒くさいから
そのままコピペして動けるものを一式張って

80 ：
ありがとございます。
http://ailinksh.kojyuro.com/minigame3/hosizoraTest.html
私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。

81 ：
>>80
きめえコードだな
俺様が手直してしてやるからまってろ

82 ：
がーん、きめえ。
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。

83 ：
>>80
ほらよ
http://codepad.org/VS1I0oix

84 ：
>83
あのページ開けませんけど？
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。

85 ：
>>77
あってるぜ
waveヘッダー（コピペ）に配列くっつけてbase64エンコード（コピペ）して
dataスキームでaudioのsrcにぶっこんで鳴らしてるぜ

86 ：
画像を読み込んでCanvasに表示させると
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様？

87 ：
>>85
今すぐどうこうじゃないけど
そのうち音鳴らすことがあった時
パクっていい？

88 ：
いいぜ

89 ：
>>88
出来たらgithubにあげて有名人になってください

90 ：
969 名前：Name_Not_Found[sage] 投稿日：2012/02/10(金) 10:29:46.09 ID:???
ブラウザのcanvas表示速度を調べる装置を作ったぜー
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=fuka.html
相変わらずRすぎて困る

91 ：
こっちにも貼ろうとしたら見つかってたぜー

92 ：
var image = document.createElement('img');
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る？
保存させるときに名前付いてないのが困る

93 ：
cgiに画像名とdataURLを投げてファイル化して
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼

94 ：
>>90
putImageDataで透過出来てるってどういうことなの・・・

95 ：
ちょっと違うけど簡単に書くとこうだぜ！
1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput
1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ！

96 ：
concat()で.dataの高速複製ができたらいいんだけどな

97 ：
ピクセル単位で合成してたんだな
いつも
buffer = createElement('canvas');
g = this.buffer.getContext('2d');
g.fillRect(0,0,10,10);
ctx.drawImage(buffer,0,0,10,10,0,0);
てやって合成してたからputImageData使うなら軽く出来そう
長文スンマソン

98 ：
たぶん大量に透過させない限りcanvasの機能使ったほうが早いぜ〜

99 ：
勉強になりやした
ぜ〜の人ありがとう

100read 1read
1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
SEOのアイレップってどうなの？ (266)
【Web作成の】痛い企業サイトver.6【基本無視】 (447)
スパム業者のIPブラックリスト (669)
【ゆとり】画像掲示板が狙われています【教育】２ (651)
雑談スレ (402)
XML使いのスレ 2.0 (955)
--log9.info------------------
【PS3】ウイイレ2012　オン晒しスレ9【基地外】 (562)
【PS3】FIFA13 Part22【EA】 (814)
UFC Undisputed 3 Part32 (856)
【PS VITA】パワプロ2012オンID晒しスレPart1 (861)
【PS3】実況パワフルプロ野球2012決定版 Part3 (949)
実況パワフルプロ野球2012 パワスタ専用スレpart185 (1001)
【PS3】Fight Night Champion 第12R【XBOX360】 (786)
プロ野球チームをつくろう！(やきゅつく)PS2版29 (493)
【PS3】FIFA13 野良クソプレーヤー晒しスレ2【EA】 (340)
【PS3】FIFA13 オン晒しスレ1【基地外】 (410)
【PS3】パワプロ2012ペナント part2 (587)
パワプロ2012 パワスタトレードスレ part112 (1001)
【XBOX360】 FIFA13 2ch部屋実況スレ part6 (811)
ウイイレ2013の不具合・不満・要望をぶちまけるスレ (295)
【PS3】ウイニングイレブン2013 【ML】 Part3 (242)
【PS3】ウイイレ2012 ONLINE レジェンズスレ Part24 (771)
--log55.com------------------
携帯2chブラウザ ぬこ テスト専用スレ
終了予定、終了したガラケーサイト Part8
携帯2chﾌﾞﾗｳｻﾞ ぬこ Part133
ガンダムカードコレクション
あんぱん党こしあん派
真夏の夜のソシャマス　「KMY70……（小声）」
【コロプラ】戦国いろは 90領地目【いろは】
【mobage】アイドルマスター SideM 350人目