Canvas 2D API Specification 1.0
ttp://dev.w3.org/html5/canvas-api/canvas-2d-api.html Canvas チュートリアル - MDC Docs
ttps://developer.mozilla.org/ja/Canvas_tutorial fabric.jsってライブラリがcanvasとsvg両方に対応してる
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事
canvasの場合全面書き換えする必要がある
あとSVGはIllustratorやInkscapeなどを使用して事前に作成(外部ファイル化)が可能
難点といえば複雑な図形では描画に少し時間がかかる点か？
しかしこれはcanvasも似たようなものか
どちらもjpegやpngなどラスター画像を組み込む事も出来るので全てを描画する必要は無い
教えてくださってどうも有難うございました。
たいへん参考になりました。
とりあえずinkscapeを使って描き、SVGで出力する方法でやってみます。
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです
ここのサンプル眺めてればなんとなく理由がわかると思う
ttps://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes 注意: fill メソッドがと呼ばれるときはどんな開いている図形は自動的に閉じられ、 closePath メソッドを使う必要はありません。
なるほど
矩形やlineToなどを使う場合は別です
弧だけなら線と組み合わせる場合があるからいる
で、そのサンプルが伝播して『ほとんどのサンプルコードには使われている』状態になってる
大元がどこかは分かるだろ
この辺も読んでおくとよいでしょう
ttps://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx 左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
ttp://jsfiddle.net/cq2nLqhy/ どう直したらいいのか教えて下さい
上の方でちょっと話題になってるのと関連するけど、
beginPathが無いのとfillが1度だけしか呼ばれてないから１つの図形
と見なされてる
ログインしなくても投稿できるのか
あとパフォーマンスの観点からfillを一度だけ呼びたいんですけど無理なんでしょうか？
ttp://jsfiddle.net/cq2nLqhy/3/ 下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな？
あとfillでパスは閉じるのでclosePathは不要
100じゃなくて50じゃ？
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);
ttp://jsfiddle.net/cq2nLqhy/4/ ttp://jsfiddle.net/gLbd0frh/1/ 対照性が悪いみたいでスッキリしないと思うけど
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね
ttp://tech.kayac.com/archive/canvas-tutorial.htmlの長方形が回転するサンプルのtranslate,rotate ,translateの後にfillRectを複数並べると 惑星が回るようになってしまいました
風車みたいなものをつくりたいんですが
ttp://jsdo.it/shitman/sDTZのサンプルではcanvas要素を複数用意してたのでやっぱり複数要素作らないだめですか？ １つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん？
save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます
ttp://jsfiddle.net/0fs1dhfj/ 座標10:10に100x100の正方形を描画して、右方向に100ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか？
いや、10ずつ足してるじゃん・・・
translateで移動した位置が座標0:0となるんですね
アフィン変換、行列変換の事を言ってるんだろうか？
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メソッドをそれぞれ呼んだほうが扱いやすい気がする
中途半端なのがtransformである
奥行きをつけるのにcssからなら楽勝だがcanvasでやると知識がないと無理
書き出した絵を再度読み込める機能が必要です。
pngで書き出すだけなら次のようなものを見つけています。
Literally "Canvas"
ttp://literallycanvas.com/index.html よろしくお願いします。
飛天
ttp://jsdo.it/jagarikin/WDW8 :::::::::::::::::::: ::::::::::／ ）:::::::::
:::::（＼::::::: ／ ／ ):::::::::::
:::::/＼＼ ／ ／ ／ヽ::::::::::::
:::: ヽ ＼＼ ｨユ, ／ ／ ／ ／::::::::::::::::
:::: （ ＼ ＼＼ （ ＾ω＾） ｌ 三 ／ ／ ）:::::::::::::::
:::::::ヽ ヽ . ミヽヽ | | / 二 ／ ／
::::::: ( ＼ ヽミ ヽヽ | .| + / 二 ___／ヽ
::::... /ヽ ヽ ﾆ ヽヽ |,,,| ┼ ／／ ニ _______／
:::. ヽ____ ﾆ ヽ｀ｌ ヽ__／／ ニ ____ノ
ヽ___, ﾆ ｌ :: ′ ニ ___ノ
ヽﾆ -‐ ,ｌ :: __ ≡ __ノ+ ┼ ＊ :::::::::
ヽ---'''ヽ､ ,,,;''''＝'''''＿＿ + ┼ + .::::::::::
:::::... + ┼ + ＥＥi''!Q.Qー-､___'''''ー-､ :....::::::::::::
:::::::.... + ┼ ＥＥi. Q. Q +'''ヽ ..:...::::::::::::::::::::
:::::::::::::::::..... + ＥＥi. Q. Q ┼ :....:::::::::::::::::
::::::::::::::::::::....: + ＊ EＥi Q Q .....:::::::::::::::::
::::::::::::::::::::::::::... + EE! Q ＠.....:::::::
::::::::::::::::::....::....::. ｶカ ＠...::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::
私は不死鳥ハメ鳥。何度dat落ちしても蘇る。
世界中にあふれるさまざまなハメ撮り動画・画像を知っている。
でもただひとりの不幸な男が欄検眼段にHITしてしまい、
その男と一緒に滅びていった女達のことを私は忘れない。
私の名は不死鳥ハメ鳥、ラーミアの末裔。
魔天
ttp://jsdo.it/jagarikin/CjPp canvas部分をクリック→ポップアップでtwなどのアイコンリスト→
選択→canvasを画像として投稿、のような感じにしたいです。
そのほうがいい理由がわからん。
313ですが、それを一連的に行いたいのです。
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程度のぼやけ方を表現したいのです
よろしくおねがいします。
お世話になります。
私、責任者の加茂と申します。以後、宜しくお願い致します。
ttp://homepage2.nifty.com/e-d-a/scurl/ays.html ttp://homepage2.nifty.com/e-d-a/scurl/SW-pos.html ttp://homepage2.nifty.com/e-d-a/scurl/SW-sp.html ttp://homepage2.nifty.com/e-d-a/scurl/SW-BB8.html 浪速建設様の見解と致しましては、メールによる対応に関しましては
受付しないということで、当初より返信を行っていないようで、今後につい
てもメールや書面での対応は致しかねるというお答えでした。
ttp://www.o-naniwa.com/ このように現在まで６通のメールを送られたとのことですが、結果一度も
返信がないとう状況になっています。
ttp://homepage2.nifty.com/e-d-a/scurl/ia-1-3.html ttp://homepage2.nifty.com/e-d-a/scurl/ia-2-1.html ttp://homepage2.nifty.com/e-d-a/scurl/ia-3-1.html 私どものほうでも現在までのメール履歴は随時削除を致しております
ので実際に１１通のメールを頂戴しているか不明なところであります。
●クリスタル通り122号室の付きうごき引きニート，205号室の繰り返し症ニート
●浪速建設 女事務員 南野 東条 ●アパマンショップ八尾店 加茂正樹 でござる の巻
⇒
ttp://asaswq3wq.sblo.jp/article/181819223.html 興味がある人だけ見てください。
I0DIFOR3EF
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名がまったく意味をなさないというか・・・
何か大きなミスを犯しているでしょうか？
var contextが別のものであるかのように書いてるけど1つめのcontextは再宣言で亡くなってる
varじゃなくてlet/constで宣言してればちゃんとこれでちゃんとエラー吐いてくれるからvarをやめたほうがいい
ご指摘いただけて有り難いです。
imageはimage1とimage2に分けたのにcontextは重複させてしまっていました。
それからvarはブロックスコープを持たず、letやconstなら持つということも
知りました。新しい仕様なんでしょうか。
教えてくださってどうも有難う御座いました。
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
HAVC1
