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 ttp://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element canvas 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
ttp://www.html5.jp/tag/elements/canvas.html Canvas - HTML5.JP
ttp://www.html5.jp/canvas/index.html 【WHATWG】HTML5 Part3【W3C HTML WG】
ttp://hibari.2ch.net/test/read.cgi/hp/1295872957/ + JavaScript の質問用スレッド vol.86 +
ttp://hibari.2ch.net/test/read.cgi/hp/1303790568/ 【誰か】jQueryのここがわからない【助けて】
ttp://hibari.2ch.net/test/read.cgi/tech/1229881548/ ===========完===========
┌──┐
┌┴┐ ├┐
│ ├┬┘│
│┌┴┤ │
└┤ └┬┘
└──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか
これさえなけりゃ気合いで何でもありにできるのにな
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる
ttp://himajin.moe-nifty.com/photos/uncategorized/2007/10/18/damashi005.jpg こういうだまし絵の立体みたいに
一部を切断して繋がってるように見せかけるような方法くらいしか思いつかないけどそれはもうベツモノだし
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか
なんとかしてくんなきゃ手が出せないぜ
対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか？
ttps://markup.mozilla.org/ja/#/ これなんかすげえな
ttp://ultra-zone.net/canvas 特におもしろみもないフツーのものでした
<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>
赤い円の中を四角で切り抜いて
切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
あと下の緑の四角と水色の四角も切り抜いた赤い円の内側から見えるようにしたいです
これがどういう意味かよくわかんなからそれ以外の部分だけ
ttp://ideone.com/AZtYY レスありがとうございます
キャンバス二枚用意するんですね
> ＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
> これがどういう意味かよくわかんなからそれ以外の部分だけ
こういう意味です・・・伝わりますか
<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>
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();
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);
とシンプルにもできる
clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか？
イメージ通りの結果です！ありがとうございますm(_ _)m
> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしにのほうをtrueに、のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます
これ理解できました
本当にどうもありがとうございます
ttps://developer.mozilla.org/ja/Drawing_text_using_a_canvas 想定してなかったが大正解だな
ttps://developer.mozilla.org/ja/Canvas_tutorial/Using_images#section_7 > 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか？
コードが短くなるというだけで速度とかは逆に遅くなる？
html5.jpでおｋ
ってのが世間の風潮
俺もやろうか考えたけど面倒くさいからやってない
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね
＼ ヽ ヽ / / ／
お断りだああああああああああぁぁぁ！！
＼ ｜ / ／
,ｲ
￣ -- = ＿ / | --'''''''
,,, ,r‐､λノ ﾞi､_,､ﾉゝ - ￣
ﾞl ﾞ､_
.j´ . .ﾊ_, ,_ﾊ （.
─ ＿ ─ { (ﾟωﾟ ） /─ ＿ ─
). c/ ,つ ,l~
´y ｛ ,、 ｛ <
ゝ lﾉ ヽ,) ,
それはどのレベルまでやるんだ？
簡易設計図みたいに遠近法もなしの線だけでできた直方体か？
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=iro.html CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・
やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか？
大きい面積を塗りつぶすなどする場合はかなり遅くなると思います。
IE9だとFirefox5とかに比べて速いのでハードウェアアクセラレーションが効いているのかもしれません。
ttp://www.ibm.com/developerworks/jp/web/library/wa-html5fundamentals4/ ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=syk.html おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)ｲｲ
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト
結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定
・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます
正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです
JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました
置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね
そのあたりをうまくやれば改善できるかもです
IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、；
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。
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);
...つづく
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。
過去ログから順番に見てたが爆笑したｗ
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=hos.html よく出来てるんだけど
ルールがいまいちわからん
audioで波形作ってcanvasで表示させたぜ〜
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=oto2.html と思ってコード見たら読みづれぇぇ！
これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる？
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を紹介しているサイトでは綺麗にピクセル単位で指定できると書いてあったので戸惑っています。
面倒くさいから
そのままコピペして動けるものを一式張って
ttp://ailinksh.kojyuro.com/minigame3/hosizoraTest.html 私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。
きめえコードだな
俺様が手直してしてやるからまってろ
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。
ほらよ
ttp://codepad.org/VS1I0oix あのページ開けませんけど？
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。
あってるぜ
waveヘッダー（コピペ）に配列くっつけてbase64エンコード（コピペ）して
dataスキームでaudioのsrcにぶっこんで鳴らしてるぜ
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様？
今すぐどうこうじゃないけど
そのうち音鳴らすことがあった時
パクっていい？
出来たらgithubにあげて有名人になってください
ブラウザのcanvas表示速度を調べる装置を作ったぜー
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=fuka.html 相変わらず変態すぎて困る
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る？
保存させるときに名前付いてないのが困る
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼
putImageDataで透過出来てるってどういうことなの・・・
1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput
1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ！
いつも
buffer = createElement('canvas');
g = this.buffer.getContext('2d');
g.fillRect(0,0,10,10);
ctx.drawImage(buffer,0,0,10,10,0,0);
てやって合成してたからputImageData使うなら軽く出来そう
長文スンマソン
ぜ〜の人ありがとう
ってかあれどうなってんの？？
setTimeoutとか使ってないっぽいんだけど
lineWidthを太くすると、
ttp://f.hatena.ne.jp/ogatashi/20110605130608 このような線になってしまいます。
これは何が原因で、どのように対策すればいいのでしょうか?
ttp://ascii.jp/elem/000/000/513/513377/index-4.html を参考に作っています。
beginPath
moveTo
lineTo
stroke
closePath
の処理を繰り返しております。
素早くマウスを動かすとスムースな線が引かれ、ゆっくり動かすとリンク先のようになるため
mousemoveイベントが1px毎に発生し、1pxの太い幅が引かれそのようにトゲトゲのような
ものになっているのかと思います。
最低いくつなら線引くってやればいんじゃね
距離=Math.pow((前回X-今X)*(前回X-今X)+(前回Y-今Y)*(前回Y-今y),0.5)
ありがとうございます
私もそれを考えてみたのですが、
その最低の距離を大きくすると、小さな角を持った線が引けなくなり、
小さくすると、少し太くなるものの同じような状態になります。
また、大きくした状態でも、いろいろな角度に移動させると同じような状態になります。
目で見て納得できるようにjsをこうしてみ。
ttp://ideone.com/li1ot あとな、原因を追求するときはちゃんとログを取るように。
〜かと思います、で済ませるなよ。
対策は、自分で四辺形を描くしかない。
mousedown時にbeginPath(), moveTo()
mouseup時にclosePath()すればいい
ありがとうございます
そのように書いてみたのですが、mouseupしたときに引かれる線は以前と同じでした。
ttp://ideone.com/E12Py 曲がり角に太さを直径とする円を描画すればなめらかになるぜ
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=pin.html ちゃんとピンボールになっててワロタ
物理屋7日？
もはやわけわからんくて手がつかれた
462万点
5000行とか読む気も失せるわｗｗｗｗ
うはｗ今までまっったく気づかなかったぜ！
直したぜ
クリックされた座標で点を表示すると、マウスカーソルの右下に点が表示されます。
これをマウスアイコンの左上か、中心にするにはどうすればいいでしょうか?
座標をずらせばいいことまでは考えついたのですが、なにか方法があるのでしょうか?
マウスカーソルのサイズ取得の方法などはあるのでしょうか?
もう一点ご質問なのですが、クリックすると点が表示されるのですが、クリックしたままドラッグをすると、カーソルアイコンがテキスト選択のアイコンになってしまいます。
cssのcursor以外にドラッグ中のアイコンを指定する方法などあるのでしょうか?
独自カーソルを設定しても、ドラッグ中はテキスト選択アイコンになってしまいます。
おそらく描画する時にcanvasのtopとleft分を足していないのでしょう。
DOMをCanvas内に描けるようにしようって提案もちらっと聞いたことあるけど、
もしそれができるようになったとしても、同一生成元とかの関係でピクセル取り出せるようになるのは望み薄かも。
セキュリティー？
それが出来たらどのブラウザでも文字のラスターがとれるのに
パスワードとか入力欄だけ初期状態でキャプチャすればいいような
問題と思われるのは訪問済みかどうかの状態、フォームへの入力内容、greasemonkey等での変更、くらい？
訪問済みとフォームへの入力はキャプチャ実行時にブラウザ側で初期状態にすればいいし
greasemonkey等でのDOM等の操作はキャプチャしなくても取得できるし・・・
ここで言ったところでどうにもならないけど
webGL問題もそうして解決したんでしょ
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ana.html まぁめんどくさくてしなかっただけかもしれないけど
就職できるぞ
中学レベルで止まってるからわけわからーん／(^o^)＼
マンデルブロー集合をズームしていくやつとか作れたらかっこいいよね
１フレーム0.1秒ぐらいだから動画もやろうと思えばできるぜ〜
モアレ（干渉縞）と言うぞ
そんな簡単にやってのけちゃうなんてまじかっけー
色までついてるし感動した
ブッダブロもできたぜ〜
サンクス！直したぜ〜
文系だから用語すら聞き覚えないのばっかりだな
ttp://www.youtube.com/user/NURSSKYWALKER こんなやつか
そらわからんわ
あれ使えばできんじゃね?
ttp://box2d-js.sourceforge.net/index2.html これこれ
どうやってるかわかんないぜ！
かなり最適化されてるんだね
それとできるやつは変数関数名なんてとこはこだわらないんだなｗ
そういう奴もいるだけで、必要条件でも十分条件でもない
もし使う時は理屈だけ見て自分で使いやすいように1からコード書いてねー
エセ地球だったけど
要するにブラウザが対応していない画像リーダーを作ってみたが、描画がめちゃ遅いんで。
色の指定に¨rgba(22,33,44,1)¨みたいな文字列を指定してたら、そりゃ遅いよな｡｡。
つかったことないけどこれ？
ttp://www.w3.org/TR/2dcontext/#imagedata うぉお！こんなんあったのか。超速くなったありがとう！
これからはちゃんとw3のページも確認するよ。
全体の色を黒くしたり白っぽくしたり
ピクセルのrgb値を反転させたり変えて他の色調にしたり
ぼかしたりモザイクにしたりなど
さすがにバイナリレベルまでいじるのはきついので
何かAPIがあるといいのですが
なんかそういうAPIありませんでしょうか？
Canvasスレで聞くといいよ
漸化式
パラメーターを複素数A,複素数B, 共役を~として
C=(A~-Zn~)×(Zn~-B~)
Z(n+1)=(C+Zn)÷(C+B)
コード
パラメーターをa,b,c,dとして
e=(a-x0) f=(y0-b) g=(x0-c) h=(d-y0)
i=e*g-f*h j=e*h+f*g
k=i+x0 l=j+y0 m=i+c n=j+d
x1=(k*m+l*n)/(m*m+n*n) y1=(l-n*x1)/m
ttp://up1m.ko.gs/src/koups1614.png a=0.4 b=-1.91 c=-2.9 d=-4
ttp://up1m.ko.gs/src/koups1618.png 1.38, -0.8, -2.6, -1.3
ttp://up1m.ko.gs/src/koups1619.png たぶんバイナリでいじったほうが楽だぜ
ただローカルから読んだ画像はいじれないから
ブラウザの設定を変えれ
part5くらい行ってるんだろうな、と思ったら全然書き込みが無いのな。
canvasを使っている人って少数派なのか？
質問するにしても数えるほどしかメソッドないしググって終了
というよりの人見ればわかるけど
描画処理は文系理系の差が出る分野だからな
自由自在にできるの中の人が羨ましいわ
これはマジですごいぜ
そのまま真似してもよろしいでしょうか？
なんとか絨毯の柄みたいだ
いいぜ
でもまだ高速化できるからあれ見て自分で考えるといいぜ〜
すげえな
もうライブラリ化しちゃえばいいのに
がんがるぜ〜
真似してみた
とりあえずは、それでおk
それよりバラ曲線だけ独立させてわかりやすくしたぜー
〜スーパーバラ曲線を作ろう〜
ttp://http://www42.atwiki.jp/syugyou?cmd=upload">ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=bar.html スクショだぜ
： Name_Not_Found [] 2012/06/19(火) 15:09:51.18:BKNFn4aE
ペラ紙１枚に収まる程度の貧弱APIなのに……
JSだってselectに数字並べて表示させるのと
アニメーション実装でグラフィカルで動的なコンテンツ作成じゃ
敷居の度合いが違うでしょう
canvasに線1本ひいて俺canvasできるんだぜとかは誰も言わない
古いPCからスタートおしたら死にそうになったけど
一番右下からタヌキ ライオン フクロウに見えないでもない
ttp://geoquake.jp/experimental/HTML5/HTML5Shooter/ すげー！iPhoneでもできた！
画像部分を消したら664kbから20kbになったぞｗ
でもまぁクロージャーコンパイラー使ってるとはいえ
20kbでこれとはすごいな
こういう作品が出れば出るほどcanvasの敷居が高く感じられる
ないぜ〜
canvasで作ったのはこのスレにあげたのでほぼ全部だぜ
あとはこんなのだぜ
canvas使ってないjavascript
ブロックくずし
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=aaaa.html パズル
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=vvv.html エクセル
ピンボール
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=243&file=nnn.xls コードがさらにベタベタだぜ！
//ifとか書いてるけどネストしてたりすると
どこのifかさっぱりわからないと思うわこれｗｗｗ
stage25が鬼畜すぎるｗｗｗ
age
少ないコードでわかりやすく作り直したぜ〜
〜ブラウザだけで音を出す入門〜
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ot3.html ttp://www.riaxdnp.jp/?p=1570 この解説が断片的でわからないんですよ。コピペしても動かない。
誰か動くサンプル書いてくれませんか。
さくっと見ただけだけど
複数の画像をよーいどんで読み込み→貼り付けってすると
読み込みの早い順になるから
画像読み込み→loadイベント→処理→次
ってやろうとしているんだと思う
で、キャッシュしているとloadが発火しないんじゃないかな
個人的には先に全部読み込み完了させておいてから処理するほうが好きだな
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ore.html レベルうｐ目的で全部の敵倒してみたがHP減るだけで倒し損か？
ソース見て解析しろってことですね
canvasのWebページをキャプチャし新しいタブに表示するプログラムがあるのですが
さらに、キャプチャした画像の色を（例として赤を緑に、青を黄色になど）変換したいと
思っているのですが手がつかず困っています。
どなたか教えて頂けませんか？
(function(){
var win = window.content;
var w = win.innerWidth + win.scrollMaxX;
var h = win.innerHeight + win.scrollMaxY;
var pos = chromeWindow.document.getElementById('main-window');
var scrollbox = chromeWindow.document.createElement('scrollbox');
scrollbox.width = '1';
scrollbox.height = '1';
pos.appendChild(scrollbox);
var canvas = win.document.createElement('canvas');
canvas.style.display = 'inline';
canvas.width = w;
canvas.height = h;
scrollbox.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(1.0, 1.0);
ctx.drawWindow(win, 0, 0, w, h, "rgb(255,255,255)");
ctx.restore();
gBrowser.addTab(canvas.toDataURL("image/png"));
pos.removeChild(scrollbox);
})();
getColordata(関係あるかどうか)など調べていますがわかっていません。
よろしくお願いします。
スレチだったらすみません
後はcanvasからime=getImageData()でバイナリデータとっていじれるぜー
赤と青を変えるぜ↓
function kanten(ime){
var a,b,imed,len;
imed=ime.data;
len=imed.length;
for(a=0;a<len;a+=4){
b=imed[a];
imed[a]=imed[a+2];
imed[a+2]=b;
};
};
でもスクショしたもんは多分セキュリティ外さないとgetImageData()できないかもしれないぜー 外し方↓
クロームの場合：
アイコンを右クリ→プロパティ→リンク先→
〜.exe" の後に --allow-file-access-from-files をつける（先頭とケツに半角スペースをつけてね）
すでにクロームを開いている場合はいったん閉じる
ファイアーフォックスの場合：
アドレスバーにabout:configと入力してエンター→
security.fileuri.strict_origin_policyってとこでダブルクリック
どうもありがとうございます。
ちょっと動作確認してきます。
本当にありがとうございます。
追記です。説明不足でした。
firefoxアドオンの開発のためにお聞きしました。
<overlay id="myOverlay"
xmlns="
ttp://http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">ttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<statusbar id="status-bar">
<scrollbox width="1" height="1">
<html:canvas id="myCanvas" display="none" />
</scrollbox>
</statusbar>
</overlay>
XULを使用しています。
ボタンを押すことで→キャプチャ＋色の変換→出力
を考えています。どうにかして上記プログラムと組み合わせ？
を行いたいのですができていません。
参考にさせていただきます。ありがとうございます。
人事原則
１ 現行法では、社員が仕事を怠けたり、能力不足、就業規則違反、目標を達成できなくても解雇をしたり叱責することは違法です。どんな駄目社員、嘘つき社員、怠け者も定年まで解雇が違法なのが現行の正社員制度です。
２ パワハラは社風にあわない社員、成績の振るわない社員を自主退職に追い込む言わば人事的措置として用いられることが多い。
※違法な解雇の和解金相場は、労働審判で３ヶ月、通常裁判で１年以上の報酬、さらに社員が和解を拒めば復職が可能です。弁護士への着手金は12〜15万円＋20%の和解金、和解拒否なら20〜50万円程度。
人事部・ホットライン・御用組合へ直訴
メリット： 一時的緩和や人事異動
デメリット： 役員へ情報筒抜け、危険分子の烙印（情報漏洩がホットライン直訴者に多いのは人事部の常識）、パワハラ放置で自主退職に追い込まれる
民事訴訟・調停・労働審判
メリット： 損害賠償
デメリット： 裁判費用、解雇措置、民事不介入で刑事事案化を阻止、長期係争、パワハラ上司の継続雇用
刑事告訴
メリット： １パワハラ上司の解雇・懲戒、または２多額の和解金、１と２どちらでも被害者の雇用は維持
デメリット： 人事異動（出世コースから外れる）
◎録音は一方の当事者が取る限り合法です。※加害者に録音の同意を求める必要はありません。
◎告訴受理後の和解金は加害者の資産・収入に応じて変えてください。犯罪者の昨年の年収の半額程度×最大懲役年数が妥当です。
◎パワハラの被害についての告訴は１侮辱罪２脅迫罪３強要罪４威力業務妨害罪５傷害罪の順序で行ってください。警察・検察の協力（犯罪者の自宅・職場の強制捜査、留置所勾留）により罪の立証が楽になります。
◎刑事告訴した社員を解雇したり処遇面で著しい差別を行うことはないでしょうが、出世や管理職以上の昇進の可能性はあきらめるべきでしょう。
◎刑事告訴は民事訴訟と違って裁判による被害者への2次被害にありません。検察庁が被害者に代わって訴えをおこすので、無料で、時間と手間も告訴状をかくことと音声録音を残すだけです。
◎和解契約（公正証書・即決和解）では告訴した事実は秘匿事項となります。犯罪者が秘密保持契約を違反した場合の損害賠償金は、最低5000万円〜にしましょう。
ttp://blog.happyelements.co.jp/2012/08/websocket-html5canvasnodejscreatejs.html E2200っていう775世代のCPUでもかなり快適に動く
ttp://japanese.engadget.com/2013/02/27/1500-mmo-bombermine/ canvasからwebm動画に変換できる
ttp://www42.atwiki.jp/syugyou/pages/255.html すげーけど設定項目が多すぎ＆分かりにくくて頭がパンクしたｗ
あとやっぱ各ブラウザによる不安定さは何時までもネックやね
Uint8Array＋blob＋createObjectURLが優秀すぎる
base64encodeせずに音を出せたぜ
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
スレチなので別の所で質問して下さい。
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
【XML】SVGってどうなの2【DOM】
ttp://toro.2ch.net/test/read.cgi/hp/1155267046/ アラートではリンク先のURLが表示されるのですが、ポップアップではURLを表示することができませんでした。
また、ポップアップに文字を書き込むことを試したのですが何も表示されませんでした。
popup.htmlに別のjsファイルを読み込むようにしないとダメなのでしょうか？
function popUp(info) {
alert(info.linkUrl);
chrome.windows.create({
"url":"popup.html",
"type":"popup"
},function(win){win.document.write("abc")});
}
chrome.contextMenus.create({
"title": "ポップアップを表示",
"type": "normal",
"contexts": ["link"],
"onclick":popUp
});
枠ツクール
ttp://www53.atpages.jp/jagarikin/wak 〜orbit trap探検隊〜
ttp://http://www53.atpages.jp/jagarikin/orb">ttp://www53.atpages.jp/jagarikin/orb スクショ
： Name_Not_Found [sage] 2013/10/07(月) 13:11:22.53ID:???
俺のだと嫌がらせになるぜ〜
改行とかあるあたりコンパイルしたってわけでもなさそうなのに
こんなコード書いてたら自分じゃ途中でわけわからなくなっちまうで
こんなん作ったわ
〜秋の味覚狩り〜
ttp://www53.atpages.jp/jagarikin/b/read.php/15067 バリバリjavascript
ｗ
アトラクタ
ttp://jsdo.it/jagarikin/lqsy orbittrap
ttp://jsdo.it/jagarikin/9wb4 2dセルオートマトン
ttp://jsdo.it/jagarikin/i4gX がやはり何をやってるのかさっぱりわからん
え、これフラッシュじゃないの? というくらいのカッコいいサンプルサイトとかないのかな。
ありがとうございます＞＜
何者なんだ・・
解決策ないですかね？
<img>タグで読み込んだ画像を縮小表示するときは、アンチエイリアスが効いて綺麗に表示されるのに…。
レスありがとうございます。
canvasの drawImage() を使ってリサイズせずに、
別の方法で画像をリサイズしてからcanvasにはリサイズ後の画像を等倍で描画しろ、ってことですね。
自前でリサイズ処理を実装するのが難しそうだ…。
ブラウザのcanvas実装が進化して、綺麗にリサイズできるようになる日が来るのを待ちますw
「いったん目的の画像と元画像の中間の大きさの画像を生成する」
っていう段階的にリサイズする手があるみたいですね。
ジャギー発生の条件が「画像の縮小率が 50% を下回る」ということらしいので、
段階的に縮小して50％を下回らないようにすればジャギらないようです。
Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する
ttp://jsdo.it/21f/nvIM バイリニア（周囲４マスしか参照しない）か？
ttp://jsdo.it/obomemo/obr0 ベルベットフレア
ttp://jsdo.it/jagarikin/zCfZ ザックリしか見てないけど
function ruup()などの関数名がイカス
canvasに４つの四角を描くプログラムを書いたのですが、
なぜか、４つめの枠線が薄くなります。
ソースコードを以下に上げたので、ご教示ください。m(_ _)m
ttp://sandbox323.wiki.fc2.com/wiki/canvas-test レスありがとうございます。
/* 四角を描く */
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最新版）がおかしいんでしょうか？
ttp://techracho.bpsinc.jp/morimorihoge/2014_07_29/18555 ttp://jsdo.it/jagarikin/t4Rm じゃがりきん新作hage
他にHTMLドキュメントで表現できる方法はありますか。
SVGのほうが最適でしょうか。
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
