X
Canvasについて語ろう
0004Name_Not_Found
垢版 |
2011/05/11(水) 23:28:01.80ID:???
そして誰も語らないのであった
===========完===========
0005じゃがりきん
垢版 |
2011/05/12(木) 03:17:51.04ID:???
語るにしてもcanvasについてより描画アルゴリズムについてだろうね
0006Name_Not_Found
垢版 |
2011/05/12(木) 09:46:32.29ID:???
そんな限定的な話題にしたらもっと廃れるぞｗ
0007Name_Not_Found
垢版 |
2011/05/12(木) 19:29:41.38ID:???
FAQっぽいものを充実させてください
　 ┌──┐
┌┴┐　 ├┐
│　 ├┬┘│
│┌┴┤　 │
└┤　 └┬┘
　 └──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか
0008Name_Not_Found
垢版 |
2011/05/12(木) 21:28:47.30ID:???
今やってる勉強が終わったらサンプル載せてってやるから待ってろ
0009Name_Not_Found
垢版 |
2011/05/13(金) 02:47:26.90ID:gp+6rMmV
※デフォルトでは読み込んだ画像のデータをputImageData()できません

これさえなけりゃ気合いで何でもありにできるのにな
0011Name_Not_Found
垢版 |
2011/05/20(金) 07:31:25.13ID:???
>7は普通に３次元空間では可能
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる
0013Name_Not_Found
垢版 |
2011/05/20(金) 10:12:50.37ID:???
と言ったものの
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか
0014Name_Not_Found
垢版 |
2011/05/20(金) 10:19:39.83ID:???
そういやgetContextの引数2dしかみたことないけど3dとかあるのかすら
0015Name_Not_Found
垢版 |
2011/05/20(金) 10:33:39.86ID:???
それぐらい日本語和訳みれば3dあるかどうかわかるだろ・・・
0018Name_Not_Found
垢版 |
2011/05/25(水) 02:55:01.09ID:???
w3cが言ってたwebGLの致命的な欠陥ってどうなったんだ？
なんとかしてくんなきゃ手が出せないぜ
0019Name_Not_Found
垢版 |
2011/05/25(水) 17:05:27.05ID:???
(x1,y1) (x2,y2) (x3,y3) (x4,y4)の各四点に四隅が一致した画像ファイルを貼付けるにはどうすればいいでしょうか。

対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか？
0020Name_Not_Found
垢版 |
2011/05/28(土) 15:02:39.58ID:???
これモノクロにしたりするの時間かかるね
0023Name_Not_Found
垢版 |
2011/06/19(日) 09:27:50.28ID:???
そのうちフォトショとかシーケンサの代わりになるサイトが出るな
0025Name_Not_Found
垢版 |
2011/06/20(月) 04:26:00.53ID:???
>>24
特におもしろみもないフツーのものでした
0026Name_Not_Found
垢版 |
2011/06/20(月) 19:36:46.76ID:???
<body style="background-color:silver;">
<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>

赤い円の中を四角で切り抜いて
切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
あと下の緑の四角と水色の四角も切り抜いた赤い円の内側から見えるようにしたいです
0027Name_Not_Found
垢版 |
2011/06/20(月) 19:54:00.38ID:???
＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
これがどういう意味かよくわかんなからそれ以外の部分だけ
http://ideone.com/AZtYY
0028Name_Not_Found
垢版 |
2011/06/20(月) 22:09:03.11ID:???
>>27
レスありがとうございます
キャンバス二枚用意するんですね

> ＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
> これがどういう意味かよくわかんなからそれ以外の部分だけ
こういう意味です・・・伝わりますか

<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>
0029Name_Not_Found
垢版 |
2011/06/20(月) 23:18:16.12ID:???
切り抜き部分の透過はsave()、restore()使えばひとつのcanvasでできそうだけど無理かな
0030Name_Not_Found
垢版 |
2011/06/21(火) 08:12:07.57ID:???
>>28

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();
0031Name_Not_Found
垢版 |
2011/06/21(火) 08:25:56.10ID:???
rect()が時計回りに定義されてるから、円弧を反時計回りにして

ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);

とシンプルにもできる

clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい
0032Name_Not_Found
垢版 |
2011/06/21(火) 10:03:27.80ID:???
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか？
0033Name_Not_Found
垢版 |
2011/06/21(火) 12:16:14.49ID:???
>>30-31
イメージ通りの結果です！ありがとうございますm(_ _)m

> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと

> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしに>>30のほうをtrueに、>>31のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます
0034Name_Not_Found
垢版 |
2011/06/21(火) 21:54:49.21ID:???
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これ理解できました
本当にどうもありがとうございます
0035Name_Not_Found
垢版 |
2011/06/23(木) 06:04:37.99ID:???
canvasで文字列を画像として出すのってどーやんの？
0037問題
垢版 |
2011/06/24(金) 08:37:05.59ID:MN/NUHTR
中が塗りつぶされた五芒星を描画しなさい
0038Name_Not_Found
垢版 |
2011/06/24(金) 14:32:43.28ID:N6K/EDza
fillText("★", 0, 0);
0040Name_Not_Found
垢版 |
2011/06/26(日) 17:46:40.89ID:???
https://developer.mozilla.org/ja/Canvas_tutorial/Using_images#section_7
> 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか？
コードが短くなるというだけで速度とかは逆に遅くなる？
0041Name_Not_Found
垢版 |
2011/06/26(日) 19:16:56.95ID:???
canvasの例文wikiみたいなのやれば儲かるよ今ならね
0042Name_Not_Found
垢版 |
2011/06/26(日) 19:53:07.99ID:???
MDCでおｋ
html5.jpでおｋ
ってのが世間の風潮
0043Name_Not_Found
垢版 |
2011/06/26(日) 20:30:06.64ID:???
そこらは例文というか解説
俺もやろうか考えたけど面倒くさいからやってない
0044Name_Not_Found
垢版 |
2011/06/26(日) 20:37:34.08ID:???
ブログでゲームの作り方の解説はしたが
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね
0045Name_Not_Found
垢版 |
2011/06/26(日) 20:56:25.98ID:???
そのゲーム解説はJavascriptすか
0046Name_Not_Found
垢版 |
2011/07/04(月) 03:41:28.75ID:???
canvasでsvg女子みたいに人体描画しようとした奴いる？
0047Name_Not_Found
垢版 |
2011/07/09(土) 03:09:59.27ID:FC9y0/mh
x,y,zを渡すと直方体を描画する関数を作成しなさい。
0048Name_Not_Found
垢版 |
2011/07/09(土) 09:38:40.15ID:???
　　　　　　　　＼　　ヽ　　　　　! |　　　　 /
　　　　　＼　　　　ヽ　　　ヽ　　　　　　　/　　　　/　　 　 　 ／
　　　　　　　　お断りだああああああああああぁぁぁ！！
　　　　　　　　＼　　　　　　　　　　｜　 　 　 　 /　　　／
　　　　　　　　　 　 　 　 　 　 　 　 ,ｲ
￣　--　　=　＿　　　　　　　　 　 / |　　　　　　　　　　　　　 --'''''''
　　　　　　　　　　,,, 　 　 ,r‐､λノ　 ﾞi､_,､ﾉゝ　　　　　-　￣
　　　　　　　　　　　　　　ﾞl　　 　 　　 　 　 ﾞ､_
　　　　　　　　　　　　　 .j´　.　.ﾊ_, ,_ﾊ　　　（.
　　　　─　　　＿　　─ {　 　 (ﾟωﾟ　）　　 /─　　　＿　　　　　─
　　　　　　　　　　　　　　 ).　 c/　　 ,つ 　 ,l~
　　　　　　　　　　　　　 ´y　　｛ ,、 ｛　 　 <
　　　　　　　　　　　　　　 ゝ 　 lﾉ ヽ,)　　 ,
0049Name_Not_Found
垢版 |
2011/07/09(土) 15:17:54.54ID:1GO6b5xa
>47
それはどのレベルまでやるんだ？
簡易設計図みたいに遠近法もなしの線だけでできた直方体か？
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる
0050Name_Not_Found
垢版 |
2011/07/10(日) 02:34:32.95ID:qPnf9h8H
直方体っぽくなればどんなのでもよしとします。
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。
0052Name_Not_Found
垢版 |
2011/07/19(火) 11:24:50.86ID:aL6/Iowt
Canvasって数値配列に直接対応するフレームバッファを持っていたりするから、レンダリングは全部ソフトウエアでやるんですよね？
CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・

やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか？
0053Name_Not_Found
垢版 |
2011/07/20(水) 21:23:47.90ID:???
>>52
大きい面積を塗りつぶすなどする場合はかなり遅くなると思います。
IE9だとFirefox5とかに比べて速いのでハードウェアアクセラレーションが効いているのかもしれません。
0054Name_Not_Found
垢版 |
2011/08/05(金) 19:47:31.04ID:???
ttp://www.ibm.com/developerworks/jp/web/library/wa-html5fundamentals4/
0056Name_Not_Found
垢版 |
2011/08/10(水) 07:10:03.17ID:???
>55
おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)ｲｲ
005755
垢版 |
2011/08/11(木) 03:53:34.54ID:jFgZBwV8
それをやると無理やり変化させてるのがモロバレなんだぜ
0058Name_Not_Found
垢版 |
2011/08/11(木) 10:20:19.23ID:???
putImageData使えば、グラフィックソフト張りにいろいろできるじゃん、て思って実験してみました
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト

結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定

・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます

正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです

JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー
0059Name_Not_Found
垢版 |
2011/08/11(木) 13:30:49.46ID:5x2BmW3D
Workerの使い方が下手なだけ
0060Name_Not_Found
垢版 |
2011/08/11(木) 17:20:16.94ID:???
ふむ
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生
0061Name_Not_Found
垢版 |
2011/08/12(金) 09:49:08.05ID:???
みんな似たようなこと考えてんな
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ
0062Name_Not_Found
垢版 |
2011/08/12(金) 19:56:50.79ID:HlaABMQT
IE9にしたらネイティブアプリ並になるよ
0063Name_Not_Found
垢版 |
2011/08/13(土) 14:28:19.22ID:???
いろいろ調べてた所、大きな数の添字アクセスって高コストなんですね
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました

置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね

そのあたりをうまくやれば改善できるかもです

IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、；
0064Name_Not_Found
垢版 |
2011/08/22(月) 07:21:46.39ID:???
webGLに欠陥が見つかったとき、IEが対応させてもねーのに懸念を表明した時は何様だと思った
0065Name_Not_Found
垢版 |
2011/09/19(月) 14:21:43.65ID:9ce+ex7x
質問です
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。
0066Name_Not_Found
垢版 |
2011/09/19(月) 16:45:16.77ID:9ce+ex7x
自己解決しました
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);
...つづく
0067Name_Not_Found
垢版 |
2011/09/19(月) 16:47:23.70ID:9ce+ex7x
つづき
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....
0068Name_Not_Found
垢版 |
2011/09/19(月) 22:15:07.54ID:9ce+ex7x
訂正
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。
0069Name_Not_Found
垢版 |
2011/09/28(水) 08:17:12.72ID:???
2時間で自己解決する男の人って
0070Name_Not_Found
垢版 |
2011/09/30(金) 09:49:14.65ID:alH7YdbI
ザ他力本願
0073Name_Not_Found
垢版 |
2011/11/24(木) 03:15:28.89ID:???
すげえけどソースが汚ねえ
0074Name_Not_Found
垢版 |
2011/11/24(木) 18:23:40.46ID:vt5nE3zo
>>72
よく出来てるんだけど
ルールがいまいちわからん
0075Name_Not_Found
垢版 |
2011/12/30(金) 17:19:10.66ID:ioXxy4gO
保守
0077Name_Not_Found
垢版 |
2012/01/27(金) 19:54:11.54ID:x0agjE11
すげー！
と思ってコード見たら読みづれぇぇ！

これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる？
0078Name_Not_Found
垢版 |
2012/01/27(金) 20:11:58.90ID:WmaoenS6
100px*100pxサイズの画像を用意して
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を紹介しているサイトでは綺麗にピクセル単位で指定できると書いてあったので戸惑っています。
0079Name_Not_Found
垢版 |
2012/01/27(金) 20:22:20.03ID:???
>>78
面倒くさいから
そのままコピペして動けるものを一式張って
0080Name_Not_Found
垢版 |
2012/01/27(金) 20:51:13.81ID:WmaoenS6
ありがとございます。
http://ailinksh.kojyuro.com/minigame3/hosizoraTest.html
私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。
0081Name_Not_Found
垢版 |
2012/01/27(金) 21:01:41.41ID:???
>>80
きめえコードだな
俺様が手直してしてやるからまってろ
0082Name_Not_Found
垢版 |
2012/01/27(金) 21:04:24.58ID:WmaoenS6
がーん、きめえ。
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。
0084Name_Not_Found
垢版 |
2012/01/28(土) 13:03:16.41ID:pMrvoosz
>83
あのページ開けませんけど？
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。
008576
垢版 |
2012/01/29(日) 10:00:22.18ID:cFqi6PkD
>>77
あってるぜ
waveヘッダー（コピペ）に配列くっつけてbase64エンコード（コピペ）して
dataスキームでaudioのsrcにぶっこんで鳴らしてるぜ
0086Name_Not_Found
垢版 |
2012/01/29(日) 20:13:29.81ID:???
画像を読み込んでCanvasに表示させると
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様？
0087Name_Not_Found
垢版 |
2012/01/30(月) 06:01:12.34ID:f52eME2W
>>85
今すぐどうこうじゃないけど
そのうち音鳴らすことがあった時
パクっていい？
008885
垢版 |
2012/01/30(月) 07:34:04.91ID:???
いいぜ
0089Name_Not_Found
垢版 |
2012/01/30(月) 10:43:33.95ID:???
>>88
出来たらgithubにあげて有名人になってください
0091Name_Not_Found
垢版 |
2012/02/18(土) 09:19:47.71ID:BuZPd3bC
こっちにも貼ろうとしたら見つかってたぜー
0092Name_Not_Found
垢版 |
2012/02/19(日) 15:29:09.08ID:???
var image = document.createElement('img');
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る？
保存させるときに名前付いてないのが困る
009392
垢版 |
2012/02/19(日) 15:31:53.49ID:???
cgiに画像名とdataURLを投げてファイル化して
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼
0094Name_Not_Found
垢版 |
2012/02/19(日) 20:05:57.58ID:???
>>90

putImageDataで透過出来てるってどういうことなの・・・
0095Name_Not_Found
垢版 |
2012/02/20(月) 08:22:36.43ID:???
ちょっと違うけど簡単に書くとこうだぜ！

1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput

1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ！
0096Name_Not_Found
垢版 |
2012/02/23(木) 08:00:40.67ID:WvQzb7f8
concat()で.dataの高速複製ができたらいいんだけどな
0097Name_Not_Found
垢版 |
2012/02/23(木) 17:15:41.85ID:km5DjjGf
ピクセル単位で合成してたんだな
いつも

buffer = createElement('canvas');
g = this.buffer.getContext('2d');
g.fillRect(0,0,10,10);
ctx.drawImage(buffer,0,0,10,10,0,0);

てやって合成してたからputImageData使うなら軽く出来そう
長文スンマソン
0098Name_Not_Found
垢版 |
2012/02/24(金) 09:20:30.54ID:???
たぶん大量に透過させない限りcanvasの機能使ったほうが早いぜ〜
0099Name_Not_Found
垢版 |
2012/02/24(金) 20:59:55.35ID:g6KDZoBL
勉強になりやした
ぜ〜の人ありがとう
0100Name_Not_Found
垢版 |
2012/03/02(金) 09:12:22.68ID:???
canvasマリオがレベル高過ぎて吹いたぜー
ってかあれどうなってんの？？
setTimeoutとか使ってないっぽいんだけど
0101100
垢版 |
2012/03/04(日) 20:36:59.75ID:???
自己解決しますた。。普通にinterval使ってました
0103Name_Not_Found
垢版 |
2012/03/28(水) 08:46:29.26ID:???
その都度begin()stroke()begin()stroke()ってやってる？
0104Name_Not_Found
垢版 |
2012/03/28(水) 08:53:52.21ID:???
mousemoveにイベントハンドラを設定し、
beginPath
moveTo
lineTo
stroke
closePath
の処理を繰り返しております。
素早くマウスを動かすとスムースな線が引かれ、ゆっくり動かすとリンク先のようになるため
mousemoveイベントが1px毎に発生し、1pxの太い幅が引かれそのようにトゲトゲのような
ものになっているのかと思います。
0105Name_Not_Found
垢版 |
2012/03/28(水) 09:03:33.01ID:???
じゃ前回の位置からの距離はかって
最低いくつなら線引くってやればいんじゃね

距離=Math.pow((前回X-今X)*(前回X-今X)+(前回Y-今Y)*(前回Y-今y),0.5)
0106102
垢版 |
2012/03/28(水) 09:15:32.17ID:???
>>105
ありがとうございます
私もそれを考えてみたのですが、
その最低の距離を大きくすると、小さな角を持った線が引けなくなり、
小さくすると、少し太くなるものの同じような状態になります。

また、大きくした状態でも、いろいろな角度に移動させると同じような状態になります。
0107Name_Not_Found
垢版 |
2012/03/28(水) 12:31:20.08ID:???
隙間が開くのは当たり前なんだが。
目で見て納得できるようにjsをこうしてみ。
http://ideone.com/li1ot

あとな、原因を追求するときはちゃんとログを取るように。
〜かと思います、で済ませるなよ。

対策は、自分で四辺形を描くしかない。
0108Name_Not_Found
垢版 |
2012/03/28(水) 15:38:39.17ID:???
rectで書いたら角が円にならずにカクカクにならない?
0109Name_Not_Found
垢版 |
2012/03/28(水) 16:23:01.38ID:???
線引くたびにclosePathしてんだから、どっちにしろ角は丸くならねえよ
mousedown時にbeginPath(), moveTo()
mouseup時にclosePath()すればいい
0110Name_Not_Found
垢版 |
2012/03/28(水) 19:32:32.28ID:???
>>109
ありがとうございます
そのように書いてみたのですが、mouseupしたときに引かれる線は以前と同じでした。
0112Name_Not_Found
垢版 |
2012/03/29(木) 08:30:49.69ID:jqQpvgho
>>102
曲がり角に太さを直径とする円を描画すればなめらかになるぜ
0114Name_Not_Found
垢版 |
2012/04/07(土) 13:16:03.64ID:???
<hed>になってるけど
ちゃんとピンボールになっててワロタ
物理屋7日？
0115Name_Not_Found
垢版 |
2012/04/07(土) 16:35:14.46ID:???
すごいな
もはやわけわからんくて手がつかれた
462万点
5000行とか読む気も失せるわｗｗｗｗ
0116Name_Not_Found
垢版 |
2012/04/08(日) 09:39:39.97ID:4CNznIE6
>>114

うはｗ今までまっったく気づかなかったぜ！
直したぜ
0117Name_Not_Found
垢版 |
2012/04/08(日) 14:44:33.19ID:???
Canvasの上でマウスをクリックしたら、クリックした位置に点を表示させたいのですが、
クリックされた座標で点を表示すると、マウスカーソルの右下に点が表示されます。
これをマウスアイコンの左上か、中心にするにはどうすればいいでしょうか?
座標をずらせばいいことまでは考えついたのですが、なにか方法があるのでしょうか?
マウスカーソルのサイズ取得の方法などはあるのでしょうか?
0118117
垢版 |
2012/04/08(日) 15:09:27.54ID:???
すみません記載漏れがありました。
もう一点ご質問なのですが、クリックすると点が表示されるのですが、クリックしたままドラッグをすると、カーソルアイコンがテキスト選択のアイコンになってしまいます。
cssのcursor以外にドラッグ中のアイコンを指定する方法などあるのでしょうか?

独自カーソルを設定しても、ドラッグ中はテキスト選択アイコンになってしまいます。

0119Name_Not_Found
垢版 |
2012/04/08(日) 16:04:29.01ID:???
コードぐらい出したらどうなんだ
0120エスパー伊藤
垢版 |
2012/04/09(月) 05:05:10.21ID:???
通常はマウス座標をとると矢印のさきっちょの座標が返ってきます。
おそらく描画する時にcanvasのtopとleft分を足していないのでしょう。
0121Name_Not_Found
垢版 |
2012/04/15(日) 12:44:09.76ID:esR/SmTo
満喫のハイスペックPCでcanvas二枚重ねにしたらputImageDataでもなんか透過できたわ
0122Name_Not_Found
垢版 |
2012/04/16(月) 17:19:21.44ID:???
HTMLの画像化はサーバサイドかブラウザの拡張機能権限じゃないと無理ですか
0123Name_Not_Found
垢版 |
2012/04/16(月) 20:24:20.21ID:???
無理だね。

DOMをCanvas内に描けるようにしようって提案もちらっと聞いたことあるけど、
もしそれができるようになったとしても、同一生成元とかの関係でピクセル取り出せるようになるのは望み薄かも。
0124Name_Not_Found
垢版 |
2012/04/17(火) 08:35:15.43ID:???
なんでダメなんだろ
セキュリティー？
それが出来たらどのブラウザでも文字のラスターがとれるのに
0125Name_Not_Found
垢版 |
2012/04/17(火) 14:51:32.28ID:???
toDataURLしてどっかに送信することでプライバシを容易く侵害出来るからだろ
0126Name_Not_Found
垢版 |
2012/04/18(水) 15:47:03.14ID:???
意図しない外部のスクリプトが読み込まれてるのなら画像化しなくても侵害されるんでないの
パスワードとか入力欄だけ初期状態でキャプチャすればいいような
0127Name_Not_Found
垢版 |
2012/04/18(水) 17:37:34.13ID:???
いま外部のスクリプトとかそんな話してない
0128Name_Not_Found
垢版 |
2012/04/18(水) 20:18:49.33ID:???
自分のサイトの画面をキャプチャして何が問題なのかわからない
問題と思われるのは訪問済みかどうかの状態、フォームへの入力内容、greasemonkey等での変更、くらい？
訪問済みとフォームへの入力はキャプチャ実行時にブラウザ側で初期状態にすればいいし
greasemonkey等でのDOM等の操作はキャプチャしなくても取得できるし・・・
ここで言ったところでどうにもならないけど
0129Name_Not_Found
垢版 |
2012/04/19(木) 04:50:14.59ID:???
どっかページ開く→ローカルにある画像かたっぱしっから読み込み→スクショ→どっか送信
0130Name_Not_Found
垢版 |
2012/04/19(木) 21:46:42.29ID:???
そういう状況じゃ使えなくしたらいいじゃん
webGL問題もそうして解決したんでしょ
0131Name_Not_Found
垢版 |
2012/04/23(月) 17:57:25.83ID:???
無駄テクをまとめたぜ〜

ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ana.html
0132Name_Not_Found
垢版 |
2012/04/23(月) 18:14:51.67ID:bhqvXkeC
ありがたやありがたや
0133Name_Not_Found
垢版 |
2012/04/24(火) 07:18:59.21ID:???
さすがに今回のGoogleさんのロゴはIE8には対応できなかったみたいだな
まぁめんどくさくてしなかっただけかもしれないけど
0134Name_Not_Found
垢版 |
2012/04/24(火) 23:45:55.97ID:???
相変わらずソース汚いな
0135Name_Not_Found
垢版 |
2012/04/25(水) 10:24:55.59ID:r8ZSTI4L
連続ベジェもつけたぜ
0137Name_Not_Found
垢版 |
2012/04/29(日) 12:04:29.48ID:aRNBZNFt
パーリンノイズ習得したら炎描画がすごいことになったぜ〜
0138Name_Not_Found
垢版 |
2012/04/29(日) 23:18:31.22ID:???
数学スキル高すぎるな
中学レベルで止まってるからわけわからーん／(^o^)＼
マンデルブロー集合をズームしていくやつとか作れたらかっこいいよね
0140Name_Not_Found
垢版 |
2012/04/30(月) 12:21:39.60ID:???
物理と数学の違いがわからない
0141１３１
垢版 |
2012/04/30(月) 12:24:47.21ID:o6cw4zyS
今マンデルブロ集合をつけたとこだぜ〜
１フレーム0.1秒ぐらいだから動画もやろうと思えばできるぜ〜
0142Name_Not_Found
垢版 |
2012/05/01(火) 10:25:24.46ID:8HyFCtKP
ズーム動画もできたぜ〜
0143Name_Not_Found
垢版 |
2012/05/01(火) 16:57:40.52ID:???
錯覚線となってるところは
モアレ（干渉縞）と言うぞ
0144138
垢版 |
2012/05/02(水) 02:03:54.69ID:???
>>141
そんな簡単にやってのけちゃうなんてまじかっけー
色までついてるし感動した
0145Name_Not_Found
垢版 |
2012/05/02(水) 10:44:42.74ID:MmaY98zv
うは〜
ブッダブロもできたぜ〜

>>143
サンクス！直したぜ〜
0146Name_Not_Found
垢版 |
2012/05/06(日) 10:23:00.08ID:O3gv6j4V
ローレンツアトラクタもつけたぜ〜
0147Name_Not_Found
垢版 |
2012/05/06(日) 12:25:13.54ID:???
なんでそんな色々知ってんのｗｗｗｗｗ
文系だから用語すら聞き覚えないのばっかりだな
0148Name_Not_Found
垢版 |
2012/05/06(日) 12:56:45.71ID:???
CG技術に応用されてる。フラクタルとかカオス数学のいろいろ。
0149Name_Not_Found
垢版 |
2012/05/08(火) 10:20:47.18ID:PGbBWzNu
粒子法やろうとググッたけど５分で挫折したぜ！
0150Name_Not_Found
垢版 |
2012/05/08(火) 14:59:45.20ID:???
ttp://www.youtube.com/user/NURSSKYWALKER
こんなやつか
そらわからんわ
0151Name_Not_Found
垢版 |
2012/05/08(火) 20:35:21.69ID:???
googleがなんか2Dの物理エンジン出してなかったっけ?
あれ使えばできんじゃね?
0152Name_Not_Found
垢版 |
2012/05/08(火) 23:30:22.00ID:???
JavaScriptで実装とかやったら流石にクッソ重くなるんじゃないだろうか
0154Name_Not_Found
垢版 |
2012/05/09(水) 10:15:59.33ID:MhuyzbcX
リアプノフフラクタルをつけたぜ〜

>>153
これこれ
どうやってるかわかんないぜ！
0155Name_Not_Found
垢版 |
2012/05/13(日) 13:23:02.32ID:???
畑政義写像を習得したぜ
0156Name_Not_Found
垢版 |
2012/05/13(日) 14:18:28.79ID:???
動けばいいだけの汚らしいコードに見えて
かなり最適化されてるんだね
それとできるやつは変数関数名なんてとこはこだわらないんだなｗ
0157Name_Not_Found
垢版 |
2012/05/14(月) 08:31:03.31ID:???
>>156
そういう奴もいるだけで、必要条件でも十分条件でもない
0158Name_Not_Found
垢版 |
2012/05/14(月) 09:37:12.08ID:/Espzwv+
クリフォードアトラクタもつけたぜ

もし使う時は理屈だけ見て自分で使いやすいように1からコード書いてねー
0159１３１
垢版 |
2012/05/18(金) 12:15:33.81ID:hNpI6/k+
エセ粒子法ができたぜ〜
0160Name_Not_Found
垢版 |
2012/05/18(金) 17:48:01.52ID:???
地球に感動したわ
エセ地球だったけど
0161Name_Not_Found
垢版 |
2012/05/18(金) 22:38:07.17ID:???
1ドット毎に違う色を指定して描画する最速の方法はどうすればいいの？
要するにブラウザが対応していない画像リーダーを作ってみたが、描画がめちゃ遅いんで。
色の指定に¨rgba(22,33,44,1)¨みたいな文字列を指定してたら、そりゃ遅いよな｡｡。
0162Name_Not_Found
垢版 |
2012/05/18(金) 23:42:58.70ID:???
>>161
つかったことないけどこれ？
ttp://www.w3.org/TR/2dcontext/#imagedata
0163Name_Not_Found
垢版 |
2012/05/19(土) 07:39:54.29ID:???
>>162
うぉお！こんなんあったのか。超速くなったありがとう！
これからはちゃんとw3のページも確認するよ。
0164Name_Not_Found
垢版 |
2012/05/22(火) 10:40:09.54ID:WuGA3iAX
グモウスキーミラ写像ができたぜ〜
0166Name_Not_Found
垢版 |
2012/05/28(月) 11:40:12.07ID:???
昔ロードライク作ったけど12000行だったぜ
0167Name_Not_Found
垢版 |
2012/05/28(月) 11:41:52.91ID:???
間違えたローグライクだ
0168Name_Not_Found
垢版 |
2012/05/30(水) 08:49:24.58ID:???
canvasって画像加工できますか？
全体の色を黒くしたり白っぽくしたり
ピクセルのrgb値を反転させたり変えて他の色調にしたり
ぼかしたりモザイクにしたりなど
さすがにバイナリレベルまでいじるのはきついので
何かAPIがあるといいのですが
なんかそういうAPIありませんでしょうか？
0169Name_Not_Found
垢版 |
2012/05/30(水) 09:18:27.10ID:???
ちょっとぐらい調べてから聞けクズ
0170Name_Not_Found
垢版 |
2012/05/30(水) 14:17:50.17ID:bUb6SZEs
>>168
Canvasスレで聞くといいよ
0171Name_Not_Found
垢版 |
2012/05/30(水) 14:18:23.64ID:bUb6SZEs
ごめん、ここJSすれと間違えちゃったｗｗｗ
0172Name_Not_Found
垢版 |
2012/05/30(水) 15:51:37.44ID:GcwkN3Kz
適当にいじってたらオリジナルのアトラクタができたぜ〜

漸化式
パラメーターを複素数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
0174Name_Not_Found
垢版 |
2012/06/09(土) 10:38:02.38ID:???
おいおい、ここがcanvasの総合スレかよ…
part5くらい行ってるんだろうな、と思ったら全然書き込みが無いのな。

canvasを使っている人って少数派なのか？
0175Name_Not_Found
垢版 |
2012/06/09(土) 10:55:05.51ID:???
別段書くことないしな
質問するにしても数えるほどしかメソッドないしググって終了
0176Name_Not_Found
垢版 |
2012/06/09(土) 13:35:39.43ID:???
canvasは意外に敷居が高くて無理ポ
というより>>173の人見ればわかるけど
描画処理は文系理系の差が出る分野だからな
自由自在にできる>>173の中の人が羨ましいわ
0177１７３
垢版 |
2012/06/10(日) 11:02:54.20ID:ABo3Xo2V
でも本当に使える人間ってのは数学まっったくできないのにフォトショで面白いことができる人なんだぜ〜
0178Name_Not_Found
垢版 |
2012/06/10(日) 11:07:43.05ID:ABo3Xo2V
131にスーパーバラ曲線をつけたぜ
これはマジですごいぜ
0179Name_Not_Found
垢版 |
2012/06/13(水) 17:15:43.04ID:EN4DvDde
透過・合成のところが参考になりました
そのまま真似してもよろしいでしょうか？
0180Name_Not_Found
垢版 |
2012/06/13(水) 17:23:43.07ID:???
バラ曲線綺麗だね
なんとか絨毯の柄みたいだ
0181じゃがりきん
垢版 |
2012/06/14(木) 10:53:31.73ID:zU/m6Hnn
>>179
いいぜ
でもまだ高速化できるからあれ見て自分で考えるといいぜ〜
0182Name_Not_Found
垢版 |
2012/06/14(木) 11:46:11.30ID:zU/m6Hnn
あ
0183Name_Not_Found
垢版 |
2012/06/14(木) 21:21:56.69ID:???
10000行超えてるんですがｗｗｗｗｗｗｗｗ
すげえな
もうライブラリ化しちゃえばいいのに
0184Name_Not_Found
垢版 |
2012/06/14(木) 22:27:12.59ID:Kpb62vJK
>>181
がんがるぜ〜


真似してみた
0185Name_Not_Found
垢版 |
2012/06/16(土) 10:38:08.09ID:Y1BAW2JD
ライブラリ化ってどうやるか知らないぜ〜
0186Name_Not_Found
垢版 |
2012/06/16(土) 20:01:35.80ID:???
オブジェクトを一つ作ってネームスペースの代わりにして、そこに全部突っ込むんだ。
とりあえずは、それでおk
0188Name_Not_Found
垢版 |
2012/06/19(火) 15:09:51.18ID:BKNFn4aE
スバラッ
0189Name_Not_Found
垢版 |
2012/06/22(金) 18:23:35.56ID:???
Canvas敷居高いって本気かよ
ペラ紙１枚に収まる程度の貧弱APIなのに……
0190Name_Not_Found
垢版 |
2012/06/22(金) 23:51:37.92ID:???
おそらくペンタブと比べてみたいなニュアンスだろう
0191Name_Not_Found
垢版 |
2012/06/24(日) 01:40:16.98ID:???
APIの少なさは敷居と関係ないのでは？
JSだってselectに数字並べて表示させるのと
アニメーション実装でグラフィカルで動的なコンテンツ作成じゃ
敷居の度合いが違うでしょう
canvasに線1本ひいて俺canvasできるんだぜとかは誰も言わない
0192Name_Not_Found
垢版 |
2012/06/24(日) 01:47:46.66ID:???
>>187はすごいな
古いPCからスタートおしたら死にそうになったけど
一番右下からタヌキ　ライオン　フクロウに見えないでもない
0193Name_Not_Found
垢版 |
2012/06/24(日) 08:08:06.02ID:???
達人がCanvas使うとこうなる
ttp://geoquake.jp/experimental/HTML5/HTML5Shooter/
0195Name_Not_Found
垢版 |
2012/06/24(日) 11:37:44.77ID:???
でかいcanvasなのに速いな〜
0196Name_Not_Found
垢版 |
2012/06/24(日) 20:20:40.45ID:???
でかいのはpngをbase64_encodeしてスクリプトに組み込んでるからだ
画像部分を消したら664kbから20kbになったぞｗ
でもまぁクロージャーコンパイラー使ってるとはいえ
20kbでこれとはすごいな
こういう作品が出れば出るほどcanvasの敷居が高く感じられる
0197１８７
垢版 |
2012/06/28(木) 12:10:45.31ID:???
つべに動画あげて台湾人に売り込んできたぜー
0199Name_Not_Found
垢版 |
2012/06/28(木) 14:07:26.90ID:???
魔神　でアップロード日で検索したら出たわ
0200Name_Not_Found
垢版 |
2012/06/28(木) 16:31:16.44ID:???
カラパイアで紹介されてたの見た。作者は何者なんだ？
0201Name_Not_Found
垢版 |
2012/07/05(木) 20:50:33.77ID:???
じゃがりこさんの作ったものまとめないの
0202じゃ
垢版 |
2012/07/06(金) 12:23:31.74ID:l5DQpmYb
>>201
ないぜ〜

canvasで作ったのはこのスレにあげたのでほぼ全部だぜ
あとはこんなのだぜ

canvas使ってないjavascript
ブロックくずし
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=aaaa.html
パズル
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=vvv.html

エクセル
ピンボール
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=243&file=nnn.xls


コードがさらにベタベタだぜ！
0203Name_Not_Found
垢版 |
2012/07/06(金) 20:48:43.47ID:???
ソースどうにか汁ｗｗｗｗ
//ifとか書いてるけどネストしてたりすると
どこのifかさっぱりわからないと思うわこれｗｗｗ
0204Name_Not_Found
垢版 |
2012/07/08(日) 12:50:25.78ID:udMyyPfZ
ちなみにどこまで行った？
0205Name_Not_Found
垢版 |
2012/07/09(月) 07:16:34.46ID:FuvFKy+C
ブロック崩しやっと終わった
stage25が鬼畜すぎるｗｗｗ
0207じゃ
垢版 |
2012/08/05(日) 12:18:23.04ID:Y+KFicop
今>>187に魔神を追加してばっかでな〜んも作ってないぜ〜
0209Name_Not_Found
垢版 |
2012/08/15(水) 12:42:57.51ID:aImIa3Fi
相変わらず、糞コードだな。
0210Name_Not_Found
垢版 |
2012/09/11(火) 23:57:02.91ID:???
ttp://www.riaxdnp.jp/?p=1570

この解説が断片的でわからないんですよ。コピペしても動かない。
誰か動くサンプル書いてくれませんか。
0211Name_Not_Found
垢版 |
2012/09/14(金) 21:30:06.34ID:0ZCdrfRy
>>210
さくっと見ただけだけど

複数の画像をよーいどんで読み込み→貼り付けってすると
読み込みの早い順になるから
画像読み込み→loadイベント→処理→次

ってやろうとしているんだと思う
で、キャッシュしているとloadが発火しないんじゃないかな

個人的には先に全部読み込み完了させておいてから処理するほうが好きだな
0212Name_Not_Found
垢版 |
2012/09/15(土) 22:21:29.30ID:???
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
0213Name_Not_Found
垢版 |
2012/09/20(木) 01:06:48.78ID:???
今流行のABC証明をcanvasで頼む
0215Name_Not_Found
垢版 |
2012/10/16(火) 13:27:46.72ID:???
時間潰しアーマーワロタ
0216Name_Not_Found
垢版 |
2012/10/18(木) 19:11:48.40ID:YuSwgUtq
ドラゴンタートル強ぇ
0217Name_Not_Found
垢版 |
2012/11/04(日) 10:49:00.13ID:???
これ内部でレベルとかあがってんの？
レベルうｐ目的で全部の敵倒してみたがHP減るだけで倒し損か？
ソース見て解析しろってことですね
0218Name_Not_Found
垢版 |
2012/11/04(日) 17:55:16.65ID:???
HTML見ればレベルアップとかないって書いてある
0219Name_Not_Found
垢版 |
2012/11/04(日) 22:27:46.70ID:???
質問です。
canvasのWebページをキャプチャし新しいタブに表示するプログラムがあるのですが
さらに、キャプチャした画像の色を（例として赤を緑に、青を黄色になど）変換したいと
思っているのですが手がつかず困っています。
どなたか教えて頂けませんか？

0220Name_Not_Found
垢版 |
2012/11/04(日) 22:28:33.19ID:???
//ページ全体をキャプチャ
(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(関係あるかどうか)など調べていますがわかっていません。
よろしくお願いします。
スレチだったらすみません

0221Name_Not_Found
垢版 |
2012/11/05(月) 14:19:12.03ID:ki1QF9hM
スクショできるの知らんかったけどスクショしてcanvasに貼り付けれるなら
後は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ってとこでダブルクリック
0222Name_Not_Found
垢版 |
2012/11/05(月) 21:14:59.99ID:8AWmrkDb
寒天、いや寒転？
0223Name_Not_Found
垢版 |
2012/11/07(水) 12:40:48.65ID:???
>>221
どうもありがとうございます。
ちょっと動作確認してきます。
本当にありがとうございます。
0224Name_Not_Found
垢版 |
2012/11/07(水) 13:04:49.93ID:???
>>221
追記です。説明不足でした。
firefoxアドオンの開発のためにお聞きしました。
<overlay id="myOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<statusbar id="status-bar">
<scrollbox width="1" height="1">
<html:canvas id="myCanvas" display="none" />
</scrollbox>
</statusbar>
</overlay>

XULを使用しています。
ボタンを押すことで→キャプチャ＋色の変換→出力
を考えています。どうにかして上記プログラムと組み合わせ？
を行いたいのですができていません。
参考にさせていただきます。ありがとうございます。
0226Name_Not_Found
垢版 |
2013/01/10(木) 06:19:39.98ID:rE/mitpA
　　★★★チベットの独立は日本の核心的利益である★★★
　　http://jbbs.livedoor.jp/bbs/read.cgi/study/3729/1226114724/78

　　￥￥￥￥￥￥￥『万有サロン』書き込み大賞・総額100万円￥￥￥￥￥￥￥￥￥￥￥￥

　　この掲示板に優秀な書き込みをして、総額100万円の賞金をゲットしよう！(*^^)v
　　　　万有サロン
　　　　　　http://jbbs.livedoor.jp/study/3729/
　　　　書き込み大賞の詳細
　　　　　　http://jbbs.livedoor.jp/bbs/read.cgi/study/3729/1069922074/78-
　　　　書き込み大賞の詳細(資料倉庫内)
　　　　　　http://www2.tba.t-com.ne.jp/a-z/omake/banyu/taisho.htm

　　また、あらゆる疑問に関する質問を、携帯電話やメールでも受け付けています。
　　　　電話番号　080-4437-4187
　　　　メール　　aaa-zzz@tba.t-com.ne.jp

　　￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥
0227Name_Not_Found
垢版 |
2013/01/15(火) 14:41:52.88ID:JWS69SWh
パワハラ犯罪にたいする刑事罰(※本投稿のコピペ歓迎です)
人事原則
１　現行法では、社員が仕事を怠けたり、能力不足、就業規則違反、目標を達成できなくても解雇をしたり叱責することは違法です。どんな駄目社員、嘘つき社員、怠け者も定年まで解雇が違法なのが現行の正社員制度です。
２　パワハラは社風にあわない社員、成績の振るわない社員を自主退職に追い込む言わば人事的措置として用いられることが多い。
※違法な解雇の和解金相場は、労働審判で３ヶ月、通常裁判で１年以上の報酬、さらに社員が和解を拒めば復職が可能です。弁護士への着手金は12〜15万円＋20%の和解金、和解拒否なら20〜50万円程度。

人事部・ホットライン・御用組合へ直訴
メリット：　一時的緩和や人事異動
デメリット：　役員へ情報筒抜け、危険分子の烙印（情報漏洩がホットライン直訴者に多いのは人事部の常識）、パワハラ放置で自主退職に追い込まれる

民事訴訟・調停・労働審判
メリット：　損害賠償
デメリット：　裁判費用、解雇措置、民事不介入で刑事事案化を阻止、長期係争、パワハラ上司の継続雇用

刑事告訴
メリット：　１パワハラ上司の解雇・懲戒、または２多額の和解金、１と２どちらでも被害者の雇用は維持
デメリット：　人事異動（出世コースから外れる）
◎録音は一方の当事者が取る限り合法です。※加害者に録音の同意を求める必要はありません。
◎告訴受理後の和解金は加害者の資産・収入に応じて変えてください。犯罪者の昨年の年収の半額程度×最大懲役年数が妥当です。
◎パワハラの被害についての告訴は１侮辱罪２脅迫罪３強要罪４威力業務妨害罪５傷害罪の順序で行ってください。警察・検察の協力（犯罪者の自宅・職場の強制捜査、留置所勾留）により罪の立証が楽になります。
◎刑事告訴した社員を解雇したり処遇面で著しい差別を行うことはないでしょうが、出世や管理職以上の昇進の可能性はあきらめるべきでしょう。
◎刑事告訴は民事訴訟と違って裁判による被害者への2次被害にありません。検察庁が被害者に代わって訴えをおこすので、無料で、時間と手間も告訴状をかくことと音声録音を残すだけです。
◎和解契約（公正証書・即決和解）では告訴した事実は秘匿事項となります。犯罪者が秘密保持契約を違反した場合の損害賠償金は、最低5000万円〜にしましょう。
0228Name_Not_Found
垢版 |
2013/02/04(月) 10:28:17.74ID:UA1BFfVR
保守
0229Name_Not_Found
垢版 |
2013/03/06(水) 15:51:24.08ID:0AOG3pFY
ボンバーマンもこれ使ってるの？
0232Name_Not_Found
垢版 |
2013/03/06(水) 19:58:54.39ID:???
ボンバーマンじゃないじゃん
0233Name_Not_Found
垢版 |
2013/05/21(火) 23:37:22.32ID:???
whammy.jsというライブラリが面白い
canvasからwebm動画に変換できる
0235Name_Not_Found
垢版 |
2013/06/09(日) 01:04:07.62ID:???
>>234
すげーけど設定項目が多すぎ＆分かりにくくて頭がパンクしたｗ
あとやっぱ各ブラウザによる不安定さは何時までもネックやね
0237Name_Not_Found
垢版 |
2013/06/12(水) 00:34:59.39ID:???
やばい・・
Uint8Array＋blob＋createObjectURLが優秀すぎる
base64encodeせずに音を出せたぜ
0238Name_Not_Found
垢版 |
2013/08/28(水) NY:AN:NY.ANID:???
すみません。スレ違いだとは思いますがSVGについて教えてください。

フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
0239Name_Not_Found
垢版 |
2013/08/28(水) NY:AN:NY.ANID:???
>>238
スレチなので別の所で質問して下さい。
0240Name_Not_Found
垢版 |
2013/08/28(水) NY:AN:NY.ANID:???
すみません。スレ違いだとは思いますがSVGについて教えてください。

フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
0242Name_Not_Found
垢版 |
2013/08/29(木) NY:AN:NY.ANID:???
右クリックからリンク先のURLをポップアップで表示するChromeの拡張機能を作っています。
アラートではリンク先の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
});
0244Name_Not_Found
垢版 |
2013/10/01(火) 03:58:30.33ID:???
なるほど、相変わらずわからん
0246Name_Not_Found
垢版 |
2013/10/07(月) 13:11:22.53ID:???
あげるならさjsdo.itだかなんかのカヤックが運営するあそこにあげてよ
0247245
垢版 |
2013/10/08(火) 02:55:04.15ID:BYxKYpip
見てきたけどwonderflみたく左側にコード出るのかよ
俺のだと嫌がらせになるぜ〜
0248Name_Not_Found
垢版 |
2013/10/12(土) 01:02:44.71ID:???
コード管理大変そうなソースだな
改行とかあるあたりコンパイルしたってわけでもなさそうなのに
こんなコード書いてたら自分じゃ途中でわけわからなくなっちまうで
0252Name_Not_Found
垢版 |
2013/11/11(月) 13:30:52.86ID:???
少しはソースコードがましになってるｗｗｗ
がやはり何をやってるのかさっぱりわからん
0253Name_Not_Found
垢版 |
2013/11/11(月) 21:07:54.50ID:???
そのサイトで無改編のforkだけしてるやつなんなの
0254Name_Not_Found
垢版 |
2013/11/12(火) 10:39:47.28ID:???
有用性のあるサイトが全くないよな。
え、これフラッシュじゃないの? というくらいのカッコいいサンプルサイトとかないのかな。
0255２５１
垢版 |
2013/11/23(土) 06:06:17.92ID:KSATDeUj
みなさんのおかげでHotCodeに食い込みました
ありがとうございます＞＜
0256Name_Not_Found
垢版 |
2014/01/13(月) 20:29:49.69ID:???
じゃがりきんって人は数学者かなにか？
何者なんだ・・
0257Name_Not_Found
垢版 |
2014/01/20(月) 12:35:06.31ID:???
チョン大でユークリッド幾何教えてるって昔オフで言ってた
0258Name_Not_Found
垢版 |
2014/02/07(金) 22:01:42.13ID:???
大きな画像をcanvasに読み込んで縮小表示するとすげージャギります。
解決策ないですかね？

<img>タグで読み込んだ画像を縮小表示するときは、アンチエイリアスが効いて綺麗に表示されるのに…。
0259Name_Not_Found
垢版 |
2014/02/08(土) 12:22:17.39ID:???
等倍で読み込む→getImageData→自前縮小→put
0260Name_Not_Found
垢版 |
2014/02/08(土) 23:44:34.82ID:???
>>259
レスありがとうございます。
canvasの drawImage() を使ってリサイズせずに、
別の方法で画像をリサイズしてからcanvasにはリサイズ後の画像を等倍で描画しろ、ってことですね。

自前でリサイズ処理を実装するのが難しそうだ…。
ブラウザのcanvas実装が進化して、綺麗にリサイズできるようになる日が来るのを待ちますw
0261Name_Not_Found
垢版 |
2014/02/09(日) 16:41:57.72ID:???
drawImage()で縮小する方法として、
「いったん目的の画像と元画像の中間の大きさの画像を生成する」
っていう段階的にリサイズする手があるみたいですね。
ジャギー発生の条件が「画像の縮小率が 50% を下回る」ということらしいので、
段階的に縮小して50％を下回らないようにすればジャギらないようです。

Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する
http://jsdo.it/21f/nvIM
0262Name_Not_Found
垢版 |
2014/02/11(火) 09:37:58.89ID:4E0HsFuc
そもそも50%以下でジャギるって仕様はどうなってんだ
バイリニア（周囲４マスしか参照しない）か？
0263Name_Not_Found
垢版 |
2014/02/12(水) 15:51:06.92ID:???
画像を円形にくり抜くのって出来ないの？
0266Name_Not_Found
垢版 |
2014/03/17(月) 18:29:00.18ID:9eq4Z8up
>>265
ザックリしか見てないけど
function ruup()などの関数名がイカス
0267Name_Not_Found
垢版 |
2014/03/19(水) 22:16:35.80ID:???
読めるソースになってるｗ
0268Name_Not_Found
垢版 |
2014/03/23(日) 15:46:24.23ID:ykVxlW4K
詳しい方、おしえてください。当方、canvas初心者です。

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

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

ttp://sandbox323.wiki.fc2.com/wiki/canvas-test
0269Name_Not_Found
垢版 |
2014/03/23(日) 19:27:33.78ID:???
stroke()はrect()呼び出した後に毎回呼び出さず、最後に一回だけ呼び出せばいい
0270Name_Not_Found
垢版 |
2014/03/23(日) 20:12:22.08ID:???
>>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最新版）がおかしいんでしょうか？
0271Name_Not_Found
垢版 |
2014/08/01(金) 21:21:33.37ID:rp6Y6Wdn
Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた
ttp://techracho.bpsinc.jp/morimorihoge/2014_07_29/18555
0273Name_Not_Found
垢版 |
2015/02/17(火) 18:46:25.11ID:???
幾何学の図形を描くのにCanvasは適していますか。
他にHTMLドキュメントで表現できる方法はありますか。
SVGのほうが最適でしょうか。
0275Name_Not_Found
垢版 |
2015/02/18(水) 09:35:34.76ID:???
SVGのほうはHTMLと同じDOM操作で描くというより組み立てる感じに近い

fabric.jsってライブラリがcanvasとsvg両方に対応してる
0276Name_Not_Found
垢版 |
2015/02/18(水) 10:47:52.39ID:???
SVGの最大の強みはスケーリング変えても画質の損失が無い事、
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事

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

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

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

どちらもjpegやpngなどラスター画像を組み込む事も出来るので全てを描画する必要は無い
0277273
垢版 |
2015/02/18(水) 18:24:02.09ID:???
>>274-276
教えてくださってどうも有難うございました。
たいへん参考になりました。
とりあえずinkscapeを使って描き、SVGで出力する方法でやってみます。
0278Name_Not_Found
垢版 |
2015/02/18(水) 18:39:27.09ID:???
arcメソッドを使う場合はbeginPathもclosePathもいらないと思うんですが、使う理由は何ですか？
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです
0280Name_Not_Found
垢版 |
2015/02/18(水) 19:04:55.07ID:???
moveToでサブパスが発生するから
0281Name_Not_Found
垢版 |
2015/02/18(水) 20:40:00.31ID:???
arcだけしか使わない場合ならmoveToは不要だと思うんですよ
0282Name_Not_Found
垢版 |
2015/02/18(水) 20:40:43.54ID:???
>>279
注意: fill メソッドがと呼ばれるときはどんな開いている図形は自動的に閉じられ、 closePath メソッドを使う必要はありません。

なるほど
0283Name_Not_Found
垢版 |
2015/02/18(水) 20:41:55.38ID:???
arcで複数の円を作る場合ならmoveToはいらないという話です
矩形やlineToなどを使う場合は別です
0284Name_Not_Found
垢版 |
2015/02/18(水) 20:52:23.53ID:???
fillやstroke、closePathを呼び出すまでarcを複数回呼び出した場合、それは１つのパス、って事
0285Name_Not_Found
垢版 |
2015/02/18(水) 23:23:10.78ID:???
真円ならいらないね
弧だけなら線と組み合わせる場合があるからいる
0286Name_Not_Found
垢版 |
2015/02/19(木) 09:17:47.89ID:???
moveToが要る要らないじゃなくて、要るとき底辺コーダーが罠に嵌らないように、ご丁寧にそういうサンプルコードが書かれてるんだよ
で、そのサンプルが伝播して『ほとんどのサンプルコードには使われている』状態になってる
大元がどこかは分かるだろ
0287Name_Not_Found
垢版 |
2015/02/19(木) 09:28:11.26ID:???
fill,stroke,closePathが不要なのはfillRect,strokeRect,clearRectだけだね
0289Name_Not_Found
垢版 |
2015/02/19(木) 12:25:47.01ID:???
左○を白と黒のグラデーションにして、右○を赤と黒のグラデーションにしたいんですが
左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
http://jsfiddle.net/cq2nLqhy/

どう直したらいいのか教えて下さい
0290Name_Not_Found
垢版 |
2015/02/19(木) 12:52:03.15ID:???
>>289
上の方でちょっと話題になってるのと関連するけど、
beginPathが無いのとfillが1度だけしか呼ばれてないから１つの図形
と見なされてる
0291Name_Not_Found
垢版 |
2015/02/19(木) 13:06:35.12ID:???
それと話題それるけどそのサイトいいね
ログインしなくても投稿できるのか
0292Name_Not_Found
垢版 |
2015/02/19(木) 13:20:56.56ID:???
こうですか？左○のグラデーションが効くようになったんですけど右○は相変わらずグラデーションが効きません
あとパフォーマンスの観点からfillを一度だけ呼びたいんですけど無理なんでしょうか？
http://jsfiddle.net/cq2nLqhy/3/
0293Name_Not_Found
垢版 |
2015/02/19(木) 13:31:35.57ID:???
createRadialGradientの座標がどちらも一緒になってるよ
下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな？
あとfillでパスは閉じるのでclosePathは不要
0294Name_Not_Found
垢版 |
2015/02/19(木) 13:38:29.79ID:???
あ、あと円グラデーションの終了点がかなり外側だから黒になり切らないね
100じゃなくて50じゃ？
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);
0297Name_Not_Found
垢版 |
2015/02/19(木) 15:16:42.67ID:???
なるほど、勉強になりました
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね
0298Name_Not_Found
垢版 |
2015/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要素を複数用意してたのでやっぱり複数要素作らないだめですか？
0299Name_Not_Found
垢版 |
2015/02/20(金) 18:42:35.34ID:???
よくわからん。
１つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん？
0300Name_Not_Found
垢版 |
2015/02/20(金) 19:09:15.65ID:???
>>298
save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが
0301Name_Not_Found
垢版 |
2015/02/20(金) 22:59:29.39ID:???
多分そんな感じで作ったんですが最初から作りなおしたらできました。
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます
0302Name_Not_Found
垢版 |
2015/02/20(金) 23:26:44.32ID:???
translateで横に100ずらしたいのに、何故かxとyの分だけ余計にずれてます
http://jsfiddle.net/0fs1dhfj/
座標10:10に100x100の正方形を描画して、右方向に100ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか？
0304Name_Not_Found
垢版 |
2015/02/20(金) 23:44:36.73ID:???
理解できました
translateで移動した位置が座標0:0となるんですね
0305Name_Not_Found
垢版 |
2015/02/21(土) 10:17:56.11ID:???
transformって歴史的な理由で残されてるってw3cに書いてあったけどその歴史的な理由知ってる？
0306Name_Not_Found
垢版 |
2015/02/22(日) 20:23:32.30ID:???
それを語るなら秦の始皇帝まで遡る事になるが良いかな？
0307Name_Not_Found
垢版 |
2015/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メソッドをそれぞれ呼んだほうが扱いやすい気がする
0308Name_Not_Found
垢版 |
2015/02/24(火) 13:59:45.75ID:???
cssにはskewが実装されてるのにcanvasには実装されてない
中途半端なのがtransformである
奥行きをつけるのにcssからなら楽勝だがcanvasでやると知識がないと無理
0309Name_Not_Found
垢版 |
2015/08/22(土) 23:08:36.53ID:???
canvasを使ったお絵かきアプリのソースを捜しています。
書き出した絵を再度読み込める機能が必要です。
pngで書き出すだけなら次のようなものを見つけています。
Literally "Canvas"
http://literallycanvas.com/index.html

よろしくお願いします。
0311Name_Not_Found
垢版 |
2015/11/17(火) 05:16:50.87ID:???
>>310
　　::::::::::::::::::::　　　　　　　　　　　　　　　　　 ::::::::::／ ）:::::::::
:::::（＼:::::::　　　　　　　　　　　　　　　　　　　　 ／　／　):::::::::::
:::::/＼＼　　　　　　　　　　　　　　　　　　　／ 　／　／ヽ::::::::::::
:::: ヽ　＼＼　　 　 　 ｨユ,　　　　　　　　／　 ／　／　／::::::::::::::::
:::: （ ＼　＼＼　 　（　＾ω＾）　　　　　　ｌ　 三　／　／　）:::::::::::::::
:::::::ヽ　ヽ . ミヽヽ 　 　| |　　　　　　　/　　　二　／　／
::::::: ( ＼　ヽミ ヽヽ 　 | .|　　　+　　/　　　　二 ___／ヽ
::::...　/ヽ ヽ　ﾆ　ヽヽ　|,,,|　┼　 ／／　　 ニ _______／　
:::.　　 ヽ____　　ﾆ　ヽ｀ｌ　 ヽ__／／　　　 ニ ____ノ　　
　　　　 　ヽ___,　　ﾆ　ｌ　::　　　′ 　　　ニ ___ノ　
　　　　 　　 ヽﾆ -‐　,ｌ　::　　　　　__ ≡ __ノ+　┼　＊　　　　:::::::::
　　　　　　 　 ヽ---'''ヽ､　　,,,;''''＝'''''＿＿　+　　┼　　+　 .::::::::::
　:::::...　　　　　+　┼　+ ＥＥi''!Q.Qー-､___'''''ー-､　　　:....::::::::::::
　　:::::::....　　　　　+　┼　ＥＥi. Q.　Q　　+'''ヽ　..:...::::::::::::::::::::
　　　:::::::::::::::::.....　　　　+ 　ＥＥi. Q. 　Q　　┼　　:....:::::::::::::::::
　　　　::::::::::::::::::::....:　+　＊　EＥi　Q 　　Q　　.....:::::::::::::::::
　　　　　　::::::::::::::::::::::::::...　 +　EE!　 Q 　 　＠.....:::::::
　　　　　　　　::::::::::::::::::....::....::. 　ｶカ 　＠...::::::::::::::::
　　　　　　　　　　　　::::::::::::::::::::::::::::::::::::::::::::::::::
私は不死鳥ハメ鳥。何度dat落ちしても蘇る。
世界中にあふれるさまざまなハメ撮り動画・画像を知っている。
でもただひとりの不幸な男が欄検眼段にHITしてしまい、
その男と一緒に滅びていった女達のことを私は忘れない。
私の名は不死鳥ハメ鳥、ラーミアの末裔。
0313Name_Not_Found
垢版 |
2015/12/21(月) 20:53:05.06ID:tr4v3gJV
描かれたcanvasをSNSに簡単にアップできるようなライブラリなどはありますか？

canvas部分をクリック→ポップアップでtwなどのアイコンリスト→
選択→canvasを画像として投稿、のような感じにしたいです。
0314Name_Not_Found
垢版 |
2015/12/22(火) 19:58:01.39ID:???
普通にcanvasを右クリで画像を保存してからアップしたほうがいんじゃね？
0316Name_Not_Found
垢版 |
2015/12/23(水) 16:21:34.45ID:???
>>314
313ですが、それを一連的に行いたいのです。
0317Name_Not_Found
垢版 |
2015/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程度のぼやけ方を表現したいのです
よろしくおねがいします。
0318Name_Not_Found
垢版 |
2016/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/
このように現在まで６通のメールを送られたとのことですが、結果一度も
返信がないとう状況になっています。
　
　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
　
私どものほうでも現在までのメール履歴は随時削除を致しております
ので実際に１１通のメールを頂戴しているか不明なところであります。
　
●クリスタル通り122号室の付きうごき引きニート，205号室の繰り返し症ニート
●浪速建設 女事務員 南野 東条　 ●アパマンショップ八尾店　加茂正樹 でござる　の巻
0319Name_Not_Found
垢版 |
2017/05/18(木) 10:53:32.65ID:gdJaFD6Y
age
0321Name_Not_Found
垢版 |
2018/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名がまったく意味をなさないというか・・・
何か大きなミスを犯しているでしょうか？
0322Name_Not_Found
垢版 |
2018/01/27(土) 12:43:48.47ID:???
>>321
var contextが別のものであるかのように書いてるけど1つめのcontextは再宣言で亡くなってる
varじゃなくてlet/constで宣言してればちゃんとこれでちゃんとエラー吐いてくれるからvarをやめたほうがいい
0323321
垢版 |
2018/02/28(水) 23:13:16.03ID:???
>>322
ご指摘いただけて有り難いです。
imageはimage1とimage2に分けたのにcontextは重複させてしまっていました。
それからvarはブロックスコープを持たず、letやconstなら持つということも
知りました。新しい仕様なんでしょうか。
教えてくださってどうも有難う御座いました。
0324Name_Not_Found
垢版 |
2018/05/01(火) 18:50:10.89ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

HAVC1
0325Name_Not_Found
垢版 |
2018/10/17(水) 06:39:33.43ID:2SQGKt6Z
商品をweb上でテキスト追加なんか編集できるライブラリってないかな？
多分Canvasだと思うんだがスキルなさすぎてわからん。
0326Name_Not_Found
垢版 |
2020/08/07(金) 13:28:50.10ID:ESG7uJbW
画像アップロードツールの使い方がいまいち解りません
このコードどこに貼ったらいいですか？
↓
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,文字列・・・なんちゃらかんちゃら
0327Name_Not_Found
垢版 |
2020/08/07(金) 14:32:25.46ID:ESG7uJbW
>>326
解決しましたありがとうございました
0329Name_Not_Found
垢版 |
2023/09/04(月) 14:29:56.92ID:???
いい加減にせいや、わしも疲れるわ。
新着レスの表示
レスを投稿する

ニューススポーツなんでも実況