Canvasについて語ろう
arcだけしか使わない場合ならmoveToは不要だと思うんですよ >>279
注意: fill メソッドがと呼ばれるときはどんな開いている図形は自動的に閉じられ、 closePath メソッドを使う必要はありません。
なるほど arcで複数の円を作る場合ならmoveToはいらないという話です
矩形やlineToなどを使う場合は別です fillやstroke、closePathを呼び出すまでarcを複数回呼び出した場合、それは1つのパス、って事 真円ならいらないね
弧だけなら線と組み合わせる場合があるからいる 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度だけしか呼ばれてないから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は要るんだってばw
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要素を複数用意してたのでやっぱり複数要素作らないだめですか? よくわからん。
1つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん? >>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ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか? 理解できました
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でやると知識がないと無理 canvasを使ったお絵かきアプリのソースを捜しています。
書き出した絵を再度読み込める機能が必要です。
pngで書き出すだけなら次のようなものを見つけています。
Literally "Canvas"
http://literallycanvas.com/index.html
よろしくお願いします。 >>310
:::::::::::::::::::: ::::::::::/ ):::::::::
:::::(\::::::: / / ):::::::::::
:::::/\\ / / /ヽ::::::::::::
:::: ヽ \\ ィユ, / / / /::::::::::::::::
:::: ( \ \\ ( ^ω^) l 三 / / ):::::::::::::::
:::::::ヽ ヽ . ミヽヽ | | / 二 / /
::::::: ( \ ヽミ ヽヽ | .| + / 二 ___/ヽ
::::... /ヽ ヽ ニ ヽヽ |,,,| ┼ // ニ _______/
:::. ヽ____ ニ ヽ`l ヽ__// ニ ____ノ
ヽ___, ニ l :: ′ ニ ___ノ
ヽニ -‐ ,l :: __ ≡ __ノ+ ┼ * :::::::::
ヽ---'''ヽ、 ,,,;''''='''''__ + ┼ + .::::::::::
:::::... + ┼ + EEi''!Q.Qー-、___'''''ー-、 :....::::::::::::
:::::::.... + ┼ EEi. Q. Q +'''ヽ ..:...::::::::::::::::::::
:::::::::::::::::..... + EEi. Q. Q ┼ :....:::::::::::::::::
::::::::::::::::::::....: + * EEi Q Q .....:::::::::::::::::
::::::::::::::::::::::::::... + EE! Q @.....:::::::
::::::::::::::::::....::....::. カカ @...::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::
私は不死鳥ハメ鳥。何度dat落ちしても蘇る。
世界中にあふれるさまざまなハメ撮り動画・画像を知っている。
でもただひとりの不幸な男が欄検眼段にHITしてしまい、
その男と一緒に滅びていった女達のことを私は忘れない。
私の名は不死鳥ハメ鳥、ラーミアの末裔。 描かれたcanvasをSNSに簡単にアップできるようなライブラリなどはありますか?
canvas部分をクリック→ポップアップでtwなどのアイコンリスト→
選択→canvasを画像として投稿、のような感じにしたいです。 普通にcanvasを右クリで画像を保存してからアップしたほうがいんじゃね? >>314
313ですが、それを一連的に行いたいのです。 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程度のぼやけ方を表現したいのです
よろしくおねがいします。 ホームページで友達が稼げるようになった情報とか
⇒ http://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名がまったく意味をなさないというか・・・
何か大きなミスを犯しているでしょうか? >>321
var contextが別のものであるかのように書いてるけど1つめのcontextは再宣言で亡くなってる
varじゃなくてlet/constで宣言してればちゃんとこれでちゃんとエラー吐いてくれるからvarをやめたほうがいい >>322
ご指摘いただけて有り難いです。
imageはimage1とimage2に分けたのにcontextは重複させてしまっていました。
それからvarはブロックスコープを持たず、letやconstなら持つということも
知りました。新しい仕様なんでしょうか。
教えてくださってどうも有難う御座いました。 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
HAVC1 商品をweb上でテキスト追加なんか編集できるライブラリってないかな?
多分Canvasだと思うんだがスキルなさすぎてわからん。 画像アップロードツールの使い方がいまいち解りません
このコードどこに貼ったらいいですか?
↓
var canvas = document.getElementsByClassName( "wPaint-canvas" );
var ctx = canvas[0].getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 500, 250);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "data:image/png;base64,文字列・・・なんちゃらかんちゃら