Canvasについて語ろう

1Name_Not_Found2011/05/11(水) 15:02:49.91ID:uj4WuUJf
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

274Name_Not_Found2015/02/18(水) 02:18:21.48ID:???
用途による

275Name_Not_Found2015/02/18(水) 09:35:34.76ID:???
SVGのほうはHTMLと同じDOM操作で描くというより組み立てる感じに近い

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

276Name_Not_Found2015/02/18(水) 10:47:52.39ID:???
SVGの最大の強みはスケーリング変えても画質の損失が無い事、
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事

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

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

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

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

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

278Name_Not_Found2015/02/18(水) 18:39:27.09ID:???
arcメソッドを使う場合はbeginPathもclosePathもいらないと思うんですが、使う理由は何ですか?
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです

279Name_Not_Found2015/02/18(水) 19:01:57.68ID:???
>>278
ここのサンプル眺めてればなんとなく理由がわかると思う
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

280Name_Not_Found2015/02/18(水) 19:04:55.07ID:???
moveToでサブパスが発生するから

281Name_Not_Found2015/02/18(水) 20:40:00.31ID:???
arcだけしか使わない場合ならmoveToは不要だと思うんですよ

282Name_Not_Found2015/02/18(水) 20:40:43.54ID:???
>>279
注意: fill メソッドがと呼ばれるときはどんな開いている図形は自動的に閉じられ、 closePath メソッドを使う必要はありません。

なるほど

283Name_Not_Found2015/02/18(水) 20:41:55.38ID:???
arcで複数の円を作る場合ならmoveToはいらないという話です
矩形やlineToなどを使う場合は別です

284Name_Not_Found2015/02/18(水) 20:52:23.53ID:???
fillやstroke、closePathを呼び出すまでarcを複数回呼び出した場合、それは1つのパス、って事

285Name_Not_Found2015/02/18(水) 23:23:10.78ID:???
真円ならいらないね
弧だけなら線と組み合わせる場合があるからいる

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

287Name_Not_Found2015/02/19(木) 09:28:11.26ID:???
fill,stroke,closePathが不要なのはfillRect,strokeRect,clearRectだけだね

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

289Name_Not_Found2015/02/19(木) 12:25:47.01ID:???
左○を白と黒のグラデーションにして、右○を赤と黒のグラデーションにしたいんですが
左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
http://jsfiddle.net/cq2nLqhy/

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

290Name_Not_Found2015/02/19(木) 12:52:03.15ID:???
>>289
上の方でちょっと話題になってるのと関連するけど、
beginPathが無いのとfillが1度だけしか呼ばれてないから1つの図形
と見なされてる

291Name_Not_Found2015/02/19(木) 13:06:35.12ID:???
それと話題それるけどそのサイトいいね
ログインしなくても投稿できるのか

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

293Name_Not_Found2015/02/19(木) 13:31:35.57ID:???
createRadialGradientの座標がどちらも一緒になってるよ
下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな?
あとfillでパスは閉じるのでclosePathは不要

294Name_Not_Found2015/02/19(木) 13:38:29.79ID:???
あ、あと円グラデーションの終了点がかなり外側だから黒になり切らないね
100じゃなくて50じゃ?
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);

295Name_Not_Found2015/02/19(木) 14:01:04.90ID:???
アドバイス受けて修正したら今度は右○は効くようになったのに左○が効かなくなりました
http://jsfiddle.net/cq2nLqhy/4/

296Name_Not_Found2015/02/19(木) 14:11:46.21ID:???
いやだからbeginPathは要るんだってばw
http://jsfiddle.net/gLbd0frh/1/

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

297Name_Not_Found2015/02/19(木) 15:16:42.67ID:???
なるほど、勉強になりました
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね

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

299Name_Not_Found2015/02/20(金) 18:42:35.34ID:???
よくわからん。
1つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん?

300Name_Not_Found2015/02/20(金) 19:09:15.65ID:???
>>298
save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが

301Name_Not_Found2015/02/20(金) 22:59:29.39ID:???
多分そんな感じで作ったんですが最初から作りなおしたらできました。
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます

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

303Name_Not_Found2015/02/20(金) 23:35:20.08ID:???
>>302
いや、10ずつ足してるじゃん・・・

304Name_Not_Found2015/02/20(金) 23:44:36.73ID:???
理解できました
translateで移動した位置が座標0:0となるんですね

305Name_Not_Found2015/02/21(土) 10:17:56.11ID:???
transformって歴史的な理由で残されてるってw3cに書いてあったけどその歴史的な理由知ってる?

306Name_Not_Found2015/02/22(日) 20:23:32.30ID:???
それを語るなら秦の始皇帝まで遡る事になるが良いかな?

307Name_Not_Found2015/02/22(日) 20:52:38.66ID:???
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メソッドをそれぞれ呼んだほうが扱いやすい気がする

308Name_Not_Found2015/02/24(火) 13:59:45.75ID:???
cssにはskewが実装されてるのにcanvasには実装されてない
中途半端なのがtransformである
奥行きをつけるのにcssからなら楽勝だがcanvasでやると知識がないと無理

309Name_Not_Found2015/08/22(土) 23:08:36.53ID:???
canvasを使ったお絵かきアプリのソースを捜しています。
書き出した絵を再度読み込める機能が必要です。
pngで書き出すだけなら次のようなものを見つけています。
Literally "Canvas"
http://literallycanvas.com/index.html

よろしくお願いします。

310じゃがりきん2015/11/09(月) 19:55:12.13ID:jxiwh9if
新作どぇす

飛天
http://jsdo.it/jagarikin/WDW8

311Name_Not_Found2015/11/17(火) 05:16:50.87ID:???
>>310
  ::::::::::::::::::::                  ::::::::::/ ):::::::::
:::::(\:::::::                     / / ):::::::::::
:::::/\\                   /  / /ヽ::::::::::::
:::: ヽ \\       ィユ,        /  / / /::::::::::::::::
:::: ( \ \\   ( ^ω^)      l  三 / / ):::::::::::::::
:::::::ヽ ヽ . ミヽヽ    | |       /   二 / /
::::::: ( \ ヽミ ヽヽ   | .|   +  /    二 ___/ヽ
::::... /ヽ ヽ ニ ヽヽ |,,,| ┼  //   ニ _______/ 
:::.   ヽ____  ニ ヽ`l  ヽ__//    ニ ____ノ  
      ヽ___,  ニ l ::   ′    ニ ___ノ 
        ヽニ -‐ ,l ::     __ ≡ __ノ+ ┼ *    :::::::::
         ヽ---'''ヽ、  ,,,;''''='''''__ +  ┼  +  .::::::::::
 :::::...     + ┼ + EEi''!Q.Qー-、___'''''ー-、   :....::::::::::::
  :::::::....     + ┼ EEi. Q. Q  +'''ヽ ..:...::::::::::::::::::::
   :::::::::::::::::.....    +  EEi. Q.  Q  ┼  :....:::::::::::::::::
    ::::::::::::::::::::....: + * EEi Q   Q  .....:::::::::::::::::
      ::::::::::::::::::::::::::...  + EE!  Q    @.....:::::::
        ::::::::::::::::::....::....::.  カカ  @...::::::::::::::::
            ::::::::::::::::::::::::::::::::::::::::::::::::::
私は不死鳥ハメ鳥。何度dat落ちしても蘇る。
世界中にあふれるさまざまなハメ撮り動画・画像を知っている。
でもただひとりの不幸な男が欄検眼段にHITしてしまい、
その男と一緒に滅びていった女達のことを私は忘れない。
私の名は不死鳥ハメ鳥、ラーミアの末裔。

312じゃがりきん2015/11/17(火) 20:27:02.10ID:t8dBkVyD
進化したぜ〜


魔天
http://jsdo.it/jagarikin/CjPp

313Name_Not_Found2015/12/21(月) 20:53:05.06ID:tr4v3gJV
描かれたcanvasをSNSに簡単にアップできるようなライブラリなどはありますか?

canvas部分をクリック→ポップアップでtwなどのアイコンリスト→
選択→canvasを画像として投稿、のような感じにしたいです。

314Name_Not_Found2015/12/22(火) 19:58:01.39ID:???
普通にcanvasを右クリで画像を保存してからアップしたほうがいんじゃね?

315Name_Not_Found2015/12/22(火) 23:52:30.35ID:???
>>314
そのほうがいい理由がわからん。

316Name_Not_Found2015/12/23(水) 16:21:34.45ID:???
>>314
313ですが、それを一連的に行いたいのです。

317Name_Not_Found2015/12/26(土) 08:38:40.26ID:???
var cvs = document.createElement('canvas');
cvs.width = 300;
cvs.height = 300;
ctx = cvs.getContext('2d');
var bcnt = 10;
var wblur = 0.03;
var hblur = 50;
ctx.fillStyle = 'rgba(0,0,0, '+(0.5/bcnt)+')';
for(var i=0;i<bcnt;i++) {
ctx.beginPath();
ctx.moveTo( 20, cvs.height/2 );
ctx.arc( 20, cvs.height/2, 200+hblur/bcnt*i, Math.PI*(1.9-wblur/bcnt*i),Math.PI*(0.1+wblur/bcnt*i));
ctx.closePath();
ctx.fill();
}
物体に落ちる影ではなく伸びる影を表現したいのですが、重ねてぼかすのではループを回すだけ負荷が掛かるので、ループを避けたいのですが何か良い方法は無いでしょうか
上の例のbcntを減らすとぼやけ方に段差が出来てしまうのですが、少ない描画指示でbcnt=10程度のぼやけ方を表現したいのです
よろしくおねがいします。

318Name_Not_Found2016/01/31(日) 12:22:12.78ID:zfC0es6V
 
お世話になります。
私、責任者の加茂と申します。以後、宜しくお願い致します。
http://homepage2.nifty.com/e-d-a/scurl/ays.html
 
 http://homepage2.nifty.com/e-d-a/scurl/SW-pos.html
 http://homepage2.nifty.com/e-d-a/scurl/SW-sp.html
 http://homepage2.nifty.com/e-d-a/scurl/SW-BB8.html
 
浪速建設様の見解と致しましては、メールによる対応に関しましては
受付しないということで、当初より返信を行っていないようで、今後につい
てもメールや書面での対応は致しかねるというお答えでした。
 http://www.o-naniwa.com/
このように現在まで6通のメールを送られたとのことですが、結果一度も
返信がないとう状況になっています。
 
 http://homepage2.nifty.com/e-d-a/scurl/ia-1-3.html
 http://homepage2.nifty.com/e-d-a/scurl/ia-2-1.html
 http://homepage2.nifty.com/e-d-a/scurl/ia-3-1.html
 
私どものほうでも現在までのメール履歴は随時削除を致しております
ので実際に11通のメールを頂戴しているか不明なところであります。
 
●クリスタル通り122号室の付きうごき引きニート,205号室の繰り返し症ニート
●浪速建設 女事務員 南野 東条  ●アパマンショップ八尾店 加茂正樹 でござる の巻

319Name_Not_Found2017/05/18(木) 10:53:32.65ID:gdJaFD6Y
age

320Name_Not_Found2017/12/12(火) 05:21:20.26ID:MrUcGD8N
ホームページで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

I0DIFOR3EF

321Name_Not_Found2018/01/27(土) 11:31:19.38ID:???
【環境】
OS:Linux ブラウザ:Chromium バージョン 57.0.2987.98

【コード】
<canvas id="canvasA" width="640" height="480">
キャンバスA
</canvas>
<script>
var context = document.getElementById('canvasA').getContext('2d');
var image1 = new Image();
image1.src = 'myphoto.png';
image1.onload = function(e){
context.drawImage(image1, 0, 0, 320, 240);
};
</script>
<canvas id="canvasB" width="640" height="480">
キャンバスB
</canvas>
<script>
var context = document.getElementById('canvasB').getContext('2d');
var image2 = new Image();
image2.src = 'myphoto.png';
image2.onload = function(e){
context.drawImage(image1, 0, 0, 640, 480);
};
</script>

とすると、キャンバスBのほうに画像が重なって表示されて
キャンバスAには表示されなくなっちゃうのです。
canvas要素のid名がまったく意味をなさないというか・・・
何か大きなミスを犯しているでしょうか?

322Name_Not_Found2018/01/27(土) 12:43:48.47ID:???
>>321
var contextが別のものであるかのように書いてるけど1つめのcontextは再宣言で亡くなってる
varじゃなくてlet/constで宣言してればちゃんとこれでちゃんとエラー吐いてくれるからvarをやめたほうがいい

3233212018/02/28(水) 23:13:16.03ID:???
>>322
ご指摘いただけて有り難いです。
imageはimage1とimage2に分けたのにcontextは重複させてしまっていました。
それからvarはブロックスコープを持たず、letやconstなら持つということも
知りました。新しい仕様なんでしょうか。
教えてくださってどうも有難う御座いました。

324Name_Not_Found2018/05/01(火) 18:50:10.89ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

HAVC1

新着レスの表示
レスを投稿する