Canvasについて語ろう

等倍で読み込む→getImageData→自前縮小→put

>>259
レスありがとうございます。
canvasの drawImage() を使ってリサイズせずに、
別の方法で画像をリサイズしてからcanvasにはリサイズ後の画像を等倍で描画しろ、ってことですね。

自前でリサイズ処理を実装するのが難しそうだ…。
ブラウザのcanvas実装が進化して、綺麗にリサイズできるようになる日が来るのを待ちますw

drawImage()で縮小する方法として、
「いったん目的の画像と元画像の中間の大きさの画像を生成する」
っていう段階的にリサイズする手があるみたいですね。
ジャギー発生の条件が「画像の縮小率が 50% を下回る」ということらしいので、
段階的に縮小して50％を下回らないようにすればジャギらないようです。

Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する
http://jsdo.it/21f/nvIM

そもそも50%以下でジャギるって仕様はどうなってんだ
バイリニア（周囲４マスしか参照しない）か？

画像を円形にくり抜くのって出来ないの？

円形の画像ギャラリー
http://jsdo.it/obomemo/obr0

久々の自信作だぜ〜


ベルベットフレア
http://jsdo.it/jagarikin/zCfZ

>>265
ザックリしか見てないけど
function ruup()などの関数名がイカス

読めるソースになってるｗ

詳しい方、おしえてください。当方、canvas初心者です。

canvasに４つの四角を描くプログラムを書いたのですが、
なぜか、４つめの枠線が薄くなります。

ソースコードを以下に上げたので、ご教示ください。m(_ _)m

ttp://sandbox323.wiki.fc2.com/wiki/canvas-test

stroke()はrect()呼び出した後に毎回呼び出さず、最後に一回だけ呼び出せばいい

>>269
レスありがとうございます。

/* 四角を描く */
ctx.strokeStyle = 'rgb(255, 0, 0)'; //赤
for ( var key in coordinates ) {
ctx.rect( coordinates[key].x, coordinates[key].y, 25, 25);
}
ctx.stroke();

としてみたら、４つとも同じ色の枠線になったのですが、
なぜか少し薄い赤です。

それで、当てずっぽうですが、

/* 四角を描く */
ctx.strokeStyle = 'rgb(255, 0, 0)'; //赤
for ( var key in coordinates ) {
ctx.rect( coordinates[key].x, coordinates[key].y, 25, 25);
}
ctx.stroke();
ctx.stroke();

とstroke()を2回繰り返したら、４つとも普通の赤になりました。

自分のブラウザ（chrome最新版）がおかしいんでしょうか？

Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた
ttp://techracho.bpsinc.jp/morimorihoge/2014_07_29/18555

http://jsdo.it/jagarikin/t4Rm
じゃがりきん新作hage

幾何学の図形を描くのにCanvasは適していますか。
他にHTMLドキュメントで表現できる方法はありますか。
SVGのほうが最適でしょうか。

用途による

SVGのほうはHTMLと同じDOM操作で描くというより組み立てる感じに近い

fabric.jsってライブラリがcanvasとsvg両方に対応してる

SVGの最大の強みはスケーリング変えても画質の損失が無い事、
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事

canvasの場合全面書き換えする必要がある

あとSVGはIllustratorやInkscapeなどを使用して事前に作成(外部ファイル化)が可能

難点といえば複雑な図形では描画に少し時間がかかる点か？
しかしこれはcanvasも似たようなものか

どちらもjpegやpngなどラスター画像を組み込む事も出来るので全てを描画する必要は無い

>>274-276
教えてくださってどうも有難うございました。
たいへん参考になりました。
とりあえずinkscapeを使って描き、SVGで出力する方法でやってみます。

arcメソッドを使う場合はbeginPathもclosePathもいらないと思うんですが、使う理由は何ですか？
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです

>>278
ここのサンプル眺めてればなんとなく理由がわかると思う
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

moveToでサブパスが発生するから

arcだけしか使わない場合ならmoveToは不要だと思うんですよ

>>279
注意: fill メソッドがと呼ばれるときはどんな開いている図形は自動的に閉じられ、 closePath メソッドを使う必要はありません。

なるほど

arcで複数の円を作る場合ならmoveToはいらないという話です
矩形やlineToなどを使う場合は別です

fillやstroke、closePathを呼び出すまでarcを複数回呼び出した場合、それは１つのパス、って事

真円ならいらないね
弧だけなら線と組み合わせる場合があるからいる

moveToが要る要らないじゃなくて、要るとき底辺コーダーが罠に嵌らないように、ご丁寧にそういうサンプルコードが書かれてるんだよ
で、そのサンプルが伝播して『ほとんどのサンプルコードには使われている』状態になってる
大元がどこかは分かるだろ

fill,stroke,closePathが不要なのはfillRect,strokeRect,clearRectだけだね

ベクターグラフィックシステムの設計の根底にタートルグラフィックの考え方があります
この辺も読んでおくとよいでしょう
https://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx

左○を白と黒のグラデーションにして、右○を赤と黒のグラデーションにしたいんですが
左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
http://jsfiddle.net/cq2nLqhy/

どう直したらいいのか教えて下さい

>>289
上の方でちょっと話題になってるのと関連するけど、
beginPathが無いのとfillが1度だけしか呼ばれてないから１つの図形
と見なされてる

それと話題それるけどそのサイトいいね
ログインしなくても投稿できるのか

こうですか？左○のグラデーションが効くようになったんですけど右○は相変わらずグラデーションが効きません
あとパフォーマンスの観点からfillを一度だけ呼びたいんですけど無理なんでしょうか？
http://jsfiddle.net/cq2nLqhy/3/

createRadialGradientの座標がどちらも一緒になってるよ
下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな？
あとfillでパスは閉じるのでclosePathは不要

あ、あと円グラデーションの終了点がかなり外側だから黒になり切らないね
100じゃなくて50じゃ？
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);

アドバイス受けて修正したら今度は右○は効くようになったのに左○が効かなくなりました
http://jsfiddle.net/cq2nLqhy/4/

いやだからbeginPathは要るんだってばｗ
http://jsfiddle.net/gLbd0frh/1/

対照性が悪いみたいでスッキリしないと思うけど

なるほど、勉強になりました
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね

rotateで複数のグラフィックをそれぞれ中心で回転したい場合ってその数だけcanvas要素を作らないとだめですか？
http://tech.kayac.com/archive/canvas-tutorial.htmlの長方形が回転するサンプルのtranslate,rotate ,translateの後にfillRectを複数並べると
惑星が回るようになってしまいました
風車みたいなものをつくりたいんですが
http://jsdo.it/shitman/sDTZのサンプルではcanvas要素を複数用意してたのでやっぱり複数要素作らないだめですか？

よくわからん。
１つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん？

>>298
save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが

多分そんな感じで作ったんですが最初から作りなおしたらできました。
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます

translateで横に100ずらしたいのに、何故かxとyの分だけ余計にずれてます
http://jsfiddle.net/0fs1dhfj/
座標10:10に100x100の正方形を描画して、右方向に100ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか？

>>302
いや、10ずつ足してるじゃん・・・

理解できました
translateで移動した位置が座標0:0となるんですね

transformって歴史的な理由で残されてるってw3cに書いてあったけどその歴史的な理由知ってる？

それを語るなら秦の始皇帝まで遡る事になるが良いかな？

canvas自体そんなに歴史があるわけじゃないのに何だろうね？

アフィン変換、行列変換の事を言ってるんだろうか？

Most of the API uses SVGMatrix objects rather than this API. This API remains mostly for historical reasons.

（”APIのほとんどは、SVGMatrixは、このAPIのではなく、オブジェクトを使用します。このAPIは、歴史的な理由のために主に残る。”）

確かにtranseformメソッドを呼ぶよりscale,rotate,translateメソッドをそれぞれ呼んだほうが扱いやすい気がする

cssにはskewが実装されてるのにcanvasには実装されてない
中途半端なのがtransformである
奥行きをつけるのにcssからなら楽勝だがcanvasでやると知識がないと無理