Canvasについて語ろう
1 ：Name_Not_Found：
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
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
|
|
|
2 ：Name_Not_Found：2011/05/11(水) 15:22:50.53 ID:???
4.8.11 The canvas element ― HTML Standard
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
canvas 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
http://www.html5.jp/tag/elements/canvas.html
Canvas - HTML5.JP
http://www.html5.jp/canvas/index.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
canvas 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
http://www.html5.jp/tag/elements/canvas.html
Canvas - HTML5.JP
http://www.html5.jp/canvas/index.html
3 ：Name_Not_Found：2011/05/11(水) 15:24:37.11 ID:???
■関連スレ
【WHATWG】HTML5 Part3【W3C HTML WG】
http://hibari.2ch.net/test/read.cgi/hp/1295872957/
+ JavaScript の質問用スレッド vol.86 +
http://hibari.2ch.net/test/read.cgi/hp/1303790568/
【誰か】jQueryのここがわからない【助けて】
http://hibari.2ch.net/test/read.cgi/tech/1229881548/
【WHATWG】HTML5 Part3【W3C HTML WG】
http://hibari.2ch.net/test/read.cgi/hp/1295872957/
+ JavaScript の質問用スレッド vol.86 +
http://hibari.2ch.net/test/read.cgi/hp/1303790568/
【誰か】jQueryのここがわからない【助けて】
http://hibari.2ch.net/test/read.cgi/tech/1229881548/
4 ：Name_Not_Found：2011/05/11(水) 23:28:01.80 ID:???
そして誰も語らないのであった
===========完===========
===========完===========
語るにしてもcanvasについてより描画アルゴリズムについてだろうね
6 ：Name_Not_Found：2011/05/12(木) 09:46:32.29 ID:???
そんな限定的な話題にしたらもっと廃れるぞｗ
7 ：Name_Not_Found：2011/05/12(木) 19:29:41.38 ID:???
FAQっぽいものを充実させてください
┌──┐
┌┴┐ ├┐
│ ├┬┘│
│┌┴┤ │
└┤ └┬┘
└──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか
┌──┐
┌┴┐ ├┐
│ ├┬┘│
│┌┴┤ │
└┤ └┬┘
└──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか
8 ：Name_Not_Found：2011/05/12(木) 21:28:47.30 ID:???
今やってる勉強が終わったらサンプル載せてってやるから待ってろ
9 ：Name_Not_Found：2011/05/13(金) 02:47:26.90 ID:gp+6rMmV
※デフォルトでは読み込んだ画像のデータをputImageData()できません
これさえなけりゃ気合いで何でもありにできるのにな
これさえなけりゃ気合いで何でもありにできるのにな
10 ：Name_Not_Found：2011/05/17(火) 03:04:48.63 ID:???
間違えたgetだった
11 ：Name_Not_Found：2011/05/20(金) 07:31:25.13 ID:???
>7は普通に３次元空間では可能
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる
12 ：Name_Not_Found：2011/05/20(金) 07:57:48.77 ID:???
矩形や画像を2dで>>7みたいに配置するのは無理じゃないの
http://himajin.moe-nifty.com/photos/uncategorized/2007/10/18/damashi005.jpg
こういうだまし絵の立体みたいに
一部を切断して繋がってるように見せかけるような方法くらいしか思いつかないけどそれはもうベツモノだし
http://himajin.moe-nifty.com/photos/uncategorized/2007/10/18/damashi005.jpg
こういうだまし絵の立体みたいに
一部を切断して繋がってるように見せかけるような方法くらいしか思いつかないけどそれはもうベツモノだし
13 ：Name_Not_Found：2011/05/20(金) 10:12:50.37 ID:???
と言ったものの
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか
14 ：Name_Not_Found：2011/05/20(金) 10:19:39.83 ID:???
そういやgetContextの引数2dしかみたことないけど3dとかあるのかすら
15 ：Name_Not_Found：2011/05/20(金) 10:33:39.86 ID:???
それぐらい日本語和訳みれば3dあるかどうかわかるだろ・・・
16 ：Name_Not_Found：2011/05/20(金) 10:39:23.50 ID:???
ケンカうってんの？
17 ：Name_Not_Found：2011/05/25(水) 00:32:43.03 ID:???
つ 'webgl'
18 ：Name_Not_Found：2011/05/25(水) 02:55:01.09 ID:???
w3cが言ってたwebGLの致命的な欠陥ってどうなったんだ？
なんとかしてくんなきゃ手が出せないぜ
なんとかしてくんなきゃ手が出せないぜ
19 ：Name_Not_Found：2011/05/25(水) 17:05:27.05 ID:???
(x1,y1) (x2,y2) (x3,y3) (x4,y4)の各四点に四隅が一致した画像ファイルを貼付けるにはどうすればいいでしょうか。
対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか？
対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか？
20 ：Name_Not_Found：2011/05/28(土) 15:02:39.58 ID:???
これモノクロにしたりするの時間かかるね
age
22 ：Name_Not_Found：2011/06/19(日) 04:13:35.65 ID:???
https://markup.mozilla.org/ja/#/
これなんかすげえな
これなんかすげえな
23 ：Name_Not_Found：2011/06/19(日) 09:27:50.28 ID:???
そのうちフォトショとかシーケンサの代わりになるサイトが出るな
24 ：Name_Not_Found：2011/06/20(月) 03:52:39.21 ID:eHxVgLCG
25 ：Name_Not_Found：2011/06/20(月) 04:26:00.53 ID:???
>>24
特におもしろみもないフツーのものでした
特におもしろみもないフツーのものでした
26 ：Name_Not_Found：2011/06/20(月) 19:36:46.76 ID:???
<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>
赤い円の中を四角で切り抜いて
切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
あと下の緑の四角と水色の四角も切り抜いた赤い円の内側から見えるようにしたいです
<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>
赤い円の中を四角で切り抜いて
切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
あと下の緑の四角と水色の四角も切り抜いた赤い円の内側から見えるようにしたいです
27 ：Name_Not_Found：2011/06/20(月) 19:54:00.38 ID:???
28 ：Name_Not_Found：2011/06/20(月) 22:09:03.11 ID:???
>>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>
レスありがとうございます
キャンバス二枚用意するんですね
> ＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
> これがどういう意味かよくわかんなからそれ以外の部分だけ
こういう意味です・・・伝わりますか
<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>
29 ：Name_Not_Found：2011/06/20(月) 23:18:16.12 ID:???
切り抜き部分の透過はsave()、restore()使えばひとつのcanvasでできそうだけど無理かな
30 ：Name_Not_Found：2011/06/21(火) 08:12:07.57 ID:???
>>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();
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();
31 ：Name_Not_Found：2011/06/21(火) 08:25:56.10 ID:???
rect()が時計回りに定義されてるから、円弧を反時計回りにして
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);
とシンプルにもできる
clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);
とシンプルにもできる
clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい
32 ：Name_Not_Found：2011/06/21(火) 10:03:27.80 ID:???
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか？
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか？
33 ：Name_Not_Found：2011/06/21(火) 12:16:14.49 ID:???
>>30-31
イメージ通りの結果です！ありがとうございますm(_ _)m
> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしに>>30のほうをtrueに、>>31のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます
イメージ通りの結果です！ありがとうございますm(_ _)m
> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしに>>30のほうをtrueに、>>31のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます
34 ：Name_Not_Found：2011/06/21(火) 21:54:49.21 ID:???
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これ理解できました
本当にどうもありがとうございます
これ理解できました
本当にどうもありがとうございます
35 ：Name_Not_Found：2011/06/23(木) 06:04:37.99 ID:???
canvasで文字列を画像として出すのってどーやんの？
36 ：Name_Not_Found：2011/06/23(木) 06:45:30.30 ID:???
37 ：問題 ：2011/06/24(金) 08:37:05.59 ID:MN/NUHTR
中が塗りつぶされた五芒星を描画しなさい
38 ：Name_Not_Found：2011/06/24(金) 14:32:43.28 ID:N6K/EDza
fillText("★", 0, 0);
39 ：Name_Not_Found：2011/06/25(土) 08:23:58.88 ID:???
40 ：Name_Not_Found：2011/06/26(日) 17:46:40.89 ID:???
https://developer.mozilla.org/ja/Canvas_tutorial/Using_images#section_7
> 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか？
コードが短くなるというだけで速度とかは逆に遅くなる？
> 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか？
コードが短くなるというだけで速度とかは逆に遅くなる？
41 ：Name_Not_Found：2011/06/26(日) 19:16:56.95 ID:???
canvasの例文wikiみたいなのやれば儲かるよ今ならね
42 ：Name_Not_Found：2011/06/26(日) 19:53:07.99 ID:???
MDCでおｋ
html5.jpでおｋ
ってのが世間の風潮
html5.jpでおｋ
ってのが世間の風潮
43 ：Name_Not_Found：2011/06/26(日) 20:30:06.64 ID:???
そこらは例文というか解説
俺もやろうか考えたけど面倒くさいからやってない
俺もやろうか考えたけど面倒くさいからやってない
44 ：Name_Not_Found：2011/06/26(日) 20:37:34.08 ID:???
ブログでゲームの作り方の解説はしたが
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね
45 ：Name_Not_Found：2011/06/26(日) 20:56:25.98 ID:???
そのゲーム解説はJavascriptすか
46 ：Name_Not_Found：2011/07/04(月) 03:41:28.75 ID:???
canvasでsvg女子みたいに人体描画しようとした奴いる？
47 ：Name_Not_Found：2011/07/09(土) 03:09:59.27 ID:FC9y0/mh
x,y,zを渡すと直方体を描画する関数を作成しなさい。
48 ：Name_Not_Found：2011/07/09(土) 09:38:40.15 ID:???
＼ ヽ ! | /
＼ ヽ ヽ / / ／
お断りだああああああああああぁぁぁ！！
＼ ｜ / ／
,ｲ
￣ -- = ＿ / | --'''''''
,,, ,r‐､λノ ﾞi､_,､ﾉゝ - ￣
ﾞl ﾞ､_
.j´ . .ﾊ_, ,_ﾊ （.
─ ＿ ─ { (ﾟωﾟ ） /─ ＿ ─
). c/ ,つ ,l~
´y ｛ ,、 ｛ <
ゝ lﾉ ヽ,) ,
＼ ヽ ヽ / / ／
お断りだああああああああああぁぁぁ！！
＼ ｜ / ／
,ｲ
￣ -- = ＿ / | --'''''''
,,, ,r‐､λノ ﾞi､_,､ﾉゝ - ￣
ﾞl ﾞ､_
.j´ . .ﾊ_, ,_ﾊ （.
─ ＿ ─ { (ﾟωﾟ ） /─ ＿ ─
). c/ ,つ ,l~
´y ｛ ,、 ｛ <
ゝ lﾉ ヽ,) ,
49 ：Name_Not_Found：2011/07/09(土) 15:17:54.54 ID:1GO6b5xa
>47
それはどのレベルまでやるんだ？
簡易設計図みたいに遠近法もなしの線だけでできた直方体か？
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる
それはどのレベルまでやるんだ？
簡易設計図みたいに遠近法もなしの線だけでできた直方体か？
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる
50 ：Name_Not_Found：2011/07/10(日) 02:34:32.95 ID:qPnf9h8H
直方体っぽくなればどんなのでもよしとします。
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。
51 ：Name_Not_Found：2011/07/19(火) 06:46:10.86 ID:???
関係ないけど画像のrgb値を調べる装置を作ったぜ
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=iro.html
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=iro.html
52 ：Name_Not_Found：2011/07/19(火) 11:24:50.86 ID:aL6/Iowt
Canvasって数値配列に直接対応するフレームバッファを持っていたりするから、レンダリングは全部ソフトウエアでやるんですよね？
CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・
やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか？
CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・
やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか？
53 ：Name_Not_Found：2011/07/20(水) 21:23:47.90 ID:???
54 ：Name_Not_Found：2011/08/05(金) 19:47:31.04 ID:???
55 ：Name_Not_Found：2011/08/10(水) 03:17:37.24 ID:Movlnwp5
56 ：Name_Not_Found：2011/08/10(水) 07:10:03.17 ID:???
>55
おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)ｲｲ
おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)ｲｲ
57 ：55：2011/08/11(木) 03:53:34.54 ID:jFgZBwV8
それをやると無理やり変化させてるのがモロバレなんだぜ
58 ：Name_Not_Found：2011/08/11(木) 10:20:19.23 ID:???
putImageData使えば、グラフィックソフト張りにいろいろできるじゃん、て思って実験してみました
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト
結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定
・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます
正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです
JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト
結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定
・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます
正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです
JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー
59 ：Name_Not_Found：2011/08/11(木) 13:30:49.46 ID:5x2BmW3D
Workerの使い方が下手なだけ
60 ：Name_Not_Found：2011/08/11(木) 17:20:16.94 ID:???
ふむ
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生
61 ：Name_Not_Found：2011/08/12(金) 09:49:08.05 ID:???
みんな似たようなこと考えてんな
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ
62 ：Name_Not_Found：2011/08/12(金) 19:56:50.79 ID:HlaABMQT
IE9にしたらネイティブアプリ並になるよ
63 ：Name_Not_Found：2011/08/13(土) 14:28:19.22 ID:???
いろいろ調べてた所、大きな数の添字アクセスって高コストなんですね
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました
置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね
そのあたりをうまくやれば改善できるかもです
IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、；
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました
置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね
そのあたりをうまくやれば改善できるかもです
IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、；
64 ：Name_Not_Found：2011/08/22(月) 07:21:46.39 ID:???
webGLに欠陥が見つかったとき、IEが対応させてもねーのに懸念を表明した時は何様だと思った
65 ：Name_Not_Found：2011/09/19(月) 14:21:43.65 ID:9ce+ex7x
質問です
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。
66 ：Name_Not_Found：2011/09/19(月) 16:45:16.77 ID: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);
...つづく
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);
...つづく
67 ：Name_Not_Found：2011/09/19(月) 16:47:23.70 ID:9ce+ex7x
つづき
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....
68 ：Name_Not_Found：2011/09/19(月) 22:15:07.54 ID:9ce+ex7x
訂正
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。
69 ：Name_Not_Found：2011/09/28(水) 08:17:12.72 ID:???
2時間で自己解決する男の人って
70 ：Name_Not_Found：2011/09/30(金) 09:49:14.65 ID:alH7YdbI
ザ他力本願
71 ：Name_Not_Found：2011/10/14(金) 23:12:37.44 ID:???
72 ：Name_Not_Found：2011/11/20(日) 01:29:25.52 ID:GJyblMyv
73 ：Name_Not_Found：2011/11/24(木) 03:15:28.89 ID:???
すげえけどソースが汚ねえ
74 ：Name_Not_Found：2011/11/24(木) 18:23:40.46 ID:vt5nE3zo
75 ：Name_Not_Found：2011/12/30(金) 17:19:10.66 ID:ioXxy4gO
保守
76 ：Name_Not_Found：2012/01/27(金) 04:48:20.91 ID:oVXkhvaq
うは〜
audioで波形作ってcanvasで表示させたぜ〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=oto2.html
audioで波形作ってcanvasで表示させたぜ〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=oto2.html
77 ：Name_Not_Found：2012/01/27(金) 19:54:11.54 ID:x0agjE11
すげー！
と思ってコード見たら読みづれぇぇ！
これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる？
と思ってコード見たら読みづれぇぇ！
これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる？
78 ：Name_Not_Found：2012/01/27(金) 20:11:58.90 ID: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を紹介しているサイトでは綺麗にピクセル単位で指定できると書いてあったので戸惑っています。
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を紹介しているサイトでは綺麗にピクセル単位で指定できると書いてあったので戸惑っています。
79 ：Name_Not_Found：2012/01/27(金) 20:22:20.03 ID:???
80 ：Name_Not_Found：2012/01/27(金) 20:51:13.81 ID:WmaoenS6
ありがとございます。
http://ailinksh.kojyuro.com/minigame3/hosizoraTest.html
私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。
http://ailinksh.kojyuro.com/minigame3/hosizoraTest.html
私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。
81 ：Name_Not_Found：2012/01/27(金) 21:01:41.41 ID:???
82 ：Name_Not_Found：2012/01/27(金) 21:04:24.58 ID:WmaoenS6
がーん、きめえ。
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。
83 ：Name_Not_Found：2012/01/27(金) 21:47:05.09 ID:???
84 ：Name_Not_Found：2012/01/28(土) 13:03:16.41 ID:pMrvoosz
>83
あのページ開けませんけど？
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。
あのページ開けませんけど？
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。
85 ：76：2012/01/29(日) 10:00:22.18 ID:cFqi6PkD
86 ：Name_Not_Found：2012/01/29(日) 20:13:29.81 ID:???
画像を読み込んでCanvasに表示させると
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様？
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様？
87 ：Name_Not_Found：2012/01/30(月) 06:01:12.34 ID:f52eME2W
いいぜ
89 ：Name_Not_Found：2012/01/30(月) 10:43:33.95 ID:???
>>88
出来たらgithubにあげて有名人になってください
出来たらgithubにあげて有名人になってください
90 ：Name_Not_Found：2012/02/15(水) 10:45:21.15 ID:???
969 名前：Name_Not_Found[sage] 投稿日：2012/02/10(金) 10:29:46.09 ID:???
ブラウザのcanvas表示速度を調べる装置を作ったぜー
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=fuka.html
相変わらず変態すぎて困る
ブラウザのcanvas表示速度を調べる装置を作ったぜー
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=fuka.html
相変わらず変態すぎて困る
91 ：Name_Not_Found：2012/02/18(土) 09:19:47.71 ID:BuZPd3bC
こっちにも貼ろうとしたら見つかってたぜー
92 ：Name_Not_Found：2012/02/19(日) 15:29:09.08 ID:???
var image = document.createElement('img');
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る？
保存させるときに名前付いてないのが困る
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る？
保存させるときに名前付いてないのが困る
cgiに画像名とdataURLを投げてファイル化して
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼
94 ：Name_Not_Found：2012/02/19(日) 20:05:57.58 ID:???
95 ：Name_Not_Found：2012/02/20(月) 08:22:36.43 ID:???
ちょっと違うけど簡単に書くとこうだぜ！
1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput
1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ！
1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput
1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ！
96 ：Name_Not_Found：2012/02/23(木) 08:00:40.67 ID:WvQzb7f8
concat()で.dataの高速複製ができたらいいんだけどな
97 ：Name_Not_Found：2012/02/23(木) 17:15:41.85 ID: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使うなら軽く出来そう
長文スンマソン
いつも
buffer = createElement('canvas');
g = this.buffer.getContext('2d');
g.fillRect(0,0,10,10);
ctx.drawImage(buffer,0,0,10,10,0,0);
てやって合成してたからputImageData使うなら軽く出来そう
長文スンマソン
98 ：Name_Not_Found：2012/02/24(金) 09:20:30.54 ID:???
たぶん大量に透過させない限りcanvasの機能使ったほうが早いぜ〜
99 ：Name_Not_Found：2012/02/24(金) 20:59:55.35 ID:g6KDZoBL
勉強になりやした
ぜ〜の人ありがとう
ぜ〜の人ありがとう
100 ：Name_Not_Found：2012/03/02(金) 09:12:22.68 ID:???
canvasマリオがレベル高過ぎて吹いたぜー
ってかあれどうなってんの？？
setTimeoutとか使ってないっぽいんだけど
ってかあれどうなってんの？？
setTimeoutとか使ってないっぽいんだけど
自己解決しますた。。普通にinterval使ってました
102 ：Name_Not_Found：2012/03/28(水) 08:29:10.39 ID:???
HTML5のCanvasの勉強にペイントのようなものを作っているのですが、
lineWidthを太くすると、
http://f.hatena.ne.jp/ogatashi/20110605130608
このような線になってしまいます。
これは何が原因で、どのように対策すればいいのでしょうか?
http://ascii.jp/elem/000/000/513/513377/index-4.html
を参考に作っています。
lineWidthを太くすると、
http://f.hatena.ne.jp/ogatashi/20110605130608
このような線になってしまいます。
これは何が原因で、どのように対策すればいいのでしょうか?
http://ascii.jp/elem/000/000/513/513377/index-4.html
を参考に作っています。
103 ：Name_Not_Found：2012/03/28(水) 08:46:29.26 ID:???
その都度begin()stroke()begin()stroke()ってやってる？
104 ：Name_Not_Found：2012/03/28(水) 08:53:52.21 ID:???
mousemoveにイベントハンドラを設定し、
beginPath
moveTo
lineTo
stroke
closePath
の処理を繰り返しております。
素早くマウスを動かすとスムースな線が引かれ、ゆっくり動かすとリンク先のようになるため
mousemoveイベントが1px毎に発生し、1pxの太い幅が引かれそのようにトゲトゲのような
ものになっているのかと思います。
beginPath
moveTo
lineTo
stroke
closePath
の処理を繰り返しております。
素早くマウスを動かすとスムースな線が引かれ、ゆっくり動かすとリンク先のようになるため
mousemoveイベントが1px毎に発生し、1pxの太い幅が引かれそのようにトゲトゲのような
ものになっているのかと思います。
105 ：Name_Not_Found：2012/03/28(水) 09:03:33.01 ID:???
じゃ前回の位置からの距離はかって
最低いくつなら線引くってやればいんじゃね
距離=Math.pow((前回X-今X)*(前回X-今X)+(前回Y-今Y)*(前回Y-今y),0.5)
最低いくつなら線引くってやればいんじゃね
距離=Math.pow((前回X-今X)*(前回X-今X)+(前回Y-今Y)*(前回Y-今y),0.5)
>>105
ありがとうございます
私もそれを考えてみたのですが、
その最低の距離を大きくすると、小さな角を持った線が引けなくなり、
小さくすると、少し太くなるものの同じような状態になります。
また、大きくした状態でも、いろいろな角度に移動させると同じような状態になります。
ありがとうございます
私もそれを考えてみたのですが、
その最低の距離を大きくすると、小さな角を持った線が引けなくなり、
小さくすると、少し太くなるものの同じような状態になります。
また、大きくした状態でも、いろいろな角度に移動させると同じような状態になります。
107 ：Name_Not_Found：2012/03/28(水) 12:31:20.08 ID:???
隙間が開くのは当たり前なんだが。
目で見て納得できるようにjsをこうしてみ。
http://ideone.com/li1ot
あとな、原因を追求するときはちゃんとログを取るように。
〜かと思います、で済ませるなよ。
対策は、自分で四辺形を描くしかない。
目で見て納得できるようにjsをこうしてみ。
http://ideone.com/li1ot
あとな、原因を追求するときはちゃんとログを取るように。
〜かと思います、で済ませるなよ。
対策は、自分で四辺形を描くしかない。
108 ：Name_Not_Found：2012/03/28(水) 15:38:39.17 ID:???
rectで書いたら角が円にならずにカクカクにならない?
109 ：Name_Not_Found：2012/03/28(水) 16:23:01.38 ID:???
線引くたびにclosePathしてんだから、どっちにしろ角は丸くならねえよ
mousedown時にbeginPath(), moveTo()
mouseup時にclosePath()すればいい
mousedown時にbeginPath(), moveTo()
mouseup時にclosePath()すればいい
110 ：Name_Not_Found：2012/03/28(水) 19:32:32.28 ID:???
111 ：Name_Not_Found：2012/03/28(水) 20:16:50.67 ID:???
112 ：Name_Not_Found：2012/03/29(木) 08:30:49.69 ID:jqQpvgho
>>102
曲がり角に太さを直径とする円を描画すればなめらかになるぜ
曲がり角に太さを直径とする円を描画すればなめらかになるぜ
113 ：Name_Not_Found：2012/04/07(土) 12:02:39.60 ID:???
114 ：Name_Not_Found：2012/04/07(土) 13:16:03.64 ID:???
<hed>になってるけど
ちゃんとピンボールになっててワロタ
物理屋7日？
ちゃんとピンボールになっててワロタ
物理屋7日？
115 ：Name_Not_Found：2012/04/07(土) 16:35:14.46 ID:???
すごいな
もはやわけわからんくて手がつかれた
462万点
5000行とか読む気も失せるわｗｗｗｗ
もはやわけわからんくて手がつかれた
462万点
5000行とか読む気も失せるわｗｗｗｗ
116 ：Name_Not_Found：2012/04/08(日) 09:39:39.97 ID:4CNznIE6
117 ：Name_Not_Found：2012/04/08(日) 14:44:33.19 ID:???
Canvasの上でマウスをクリックしたら、クリックした位置に点を表示させたいのですが、
クリックされた座標で点を表示すると、マウスカーソルの右下に点が表示されます。
これをマウスアイコンの左上か、中心にするにはどうすればいいでしょうか?
座標をずらせばいいことまでは考えついたのですが、なにか方法があるのでしょうか?
マウスカーソルのサイズ取得の方法などはあるのでしょうか?
クリックされた座標で点を表示すると、マウスカーソルの右下に点が表示されます。
これをマウスアイコンの左上か、中心にするにはどうすればいいでしょうか?
座標をずらせばいいことまでは考えついたのですが、なにか方法があるのでしょうか?
マウスカーソルのサイズ取得の方法などはあるのでしょうか?
すみません記載漏れがありました。
もう一点ご質問なのですが、クリックすると点が表示されるのですが、クリックしたままドラッグをすると、カーソルアイコンがテキスト選択のアイコンになってしまいます。
cssのcursor以外にドラッグ中のアイコンを指定する方法などあるのでしょうか?
独自カーソルを設定しても、ドラッグ中はテキスト選択アイコンになってしまいます。
もう一点ご質問なのですが、クリックすると点が表示されるのですが、クリックしたままドラッグをすると、カーソルアイコンがテキスト選択のアイコンになってしまいます。
cssのcursor以外にドラッグ中のアイコンを指定する方法などあるのでしょうか?
独自カーソルを設定しても、ドラッグ中はテキスト選択アイコンになってしまいます。
119 ：Name_Not_Found：2012/04/08(日) 16:04:29.01 ID:???
コードぐらい出したらどうなんだ
通常はマウス座標をとると矢印のさきっちょの座標が返ってきます。
おそらく描画する時にcanvasのtopとleft分を足していないのでしょう。
おそらく描画する時にcanvasのtopとleft分を足していないのでしょう。
121 ：Name_Not_Found：2012/04/15(日) 12:44:09.76 ID:esR/SmTo
満喫のハイスペックPCでcanvas二枚重ねにしたらputImageDataでもなんか透過できたわ
122 ：Name_Not_Found：2012/04/16(月) 17:19:21.44 ID:???
HTMLの画像化はサーバサイドかブラウザの拡張機能権限じゃないと無理ですか
123 ：Name_Not_Found：2012/04/16(月) 20:24:20.21 ID:???
無理だね。
DOMをCanvas内に描けるようにしようって提案もちらっと聞いたことあるけど、
もしそれができるようになったとしても、同一生成元とかの関係でピクセル取り出せるようになるのは望み薄かも。
DOMをCanvas内に描けるようにしようって提案もちらっと聞いたことあるけど、
もしそれができるようになったとしても、同一生成元とかの関係でピクセル取り出せるようになるのは望み薄かも。
124 ：Name_Not_Found：2012/04/17(火) 08:35:15.43 ID:???
なんでダメなんだろ
セキュリティー？
それが出来たらどのブラウザでも文字のラスターがとれるのに
セキュリティー？
それが出来たらどのブラウザでも文字のラスターがとれるのに
125 ：Name_Not_Found：2012/04/17(火) 14:51:32.28 ID:???
toDataURLしてどっかに送信することでプライバシを容易く侵害出来るからだろ
126 ：Name_Not_Found：2012/04/18(水) 15:47:03.14 ID:???
意図しない外部のスクリプトが読み込まれてるのなら画像化しなくても侵害されるんでないの
パスワードとか入力欄だけ初期状態でキャプチャすればいいような
パスワードとか入力欄だけ初期状態でキャプチャすればいいような
127 ：Name_Not_Found：2012/04/18(水) 17:37:34.13 ID:???
いま外部のスクリプトとかそんな話してない
128 ：Name_Not_Found：2012/04/18(水) 20:18:49.33 ID:???
自分のサイトの画面をキャプチャして何が問題なのかわからない
問題と思われるのは訪問済みかどうかの状態、フォームへの入力内容、greasemonkey等での変更、くらい？
訪問済みとフォームへの入力はキャプチャ実行時にブラウザ側で初期状態にすればいいし
greasemonkey等でのDOM等の操作はキャプチャしなくても取得できるし・・・
ここで言ったところでどうにもならないけど
問題と思われるのは訪問済みかどうかの状態、フォームへの入力内容、greasemonkey等での変更、くらい？
訪問済みとフォームへの入力はキャプチャ実行時にブラウザ側で初期状態にすればいいし
greasemonkey等でのDOM等の操作はキャプチャしなくても取得できるし・・・
ここで言ったところでどうにもならないけど
129 ：Name_Not_Found：2012/04/19(木) 04:50:14.59 ID:???
どっかページ開く→ローカルにある画像かたっぱしっから読み込み→スクショ→どっか送信
130 ：Name_Not_Found：2012/04/19(木) 21:46:42.29 ID:???
そういう状況じゃ使えなくしたらいいじゃん
webGL問題もそうして解決したんでしょ
webGL問題もそうして解決したんでしょ
131 ：Name_Not_Found：2012/04/23(月) 17:57:25.83 ID:???
132 ：Name_Not_Found：2012/04/23(月) 18:14:51.67 ID:bhqvXkeC
ありがたやありがたや
133 ：Name_Not_Found：2012/04/24(火) 07:18:59.21 ID:???
さすがに今回のGoogleさんのロゴはIE8には対応できなかったみたいだな
まぁめんどくさくてしなかっただけかもしれないけど
まぁめんどくさくてしなかっただけかもしれないけど
134 ：Name_Not_Found：2012/04/24(火) 23:45:55.97 ID:???
相変わらずソース汚いな
135 ：Name_Not_Found：2012/04/25(水) 10:24:55.59 ID:r8ZSTI4L
連続ベジェもつけたぜ
136 ：Name_Not_Found：2012/04/26(木) 06:51:09.16 ID:???
>>134
就職できるぞ
就職できるぞ
137 ：Name_Not_Found：2012/04/29(日) 12:04:29.48 ID:aRNBZNFt
パーリンノイズ習得したら炎描画がすごいことになったぜ〜
138 ：Name_Not_Found：2012/04/29(日) 23:18:31.22 ID:???
数学スキル高すぎるな
中学レベルで止まってるからわけわからーん／(^o^)＼
マンデルブロー集合をズームしていくやつとか作れたらかっこいいよね
中学レベルで止まってるからわけわからーん／(^o^)＼
マンデルブロー集合をズームしていくやつとか作れたらかっこいいよね
139 ：Name_Not_Found：2012/04/30(月) 01:07:15.09 ID:???
物理屋だろ
140 ：Name_Not_Found：2012/04/30(月) 12:21:39.60 ID:???
物理と数学の違いがわからない
141 ：１３１：2012/04/30(月) 12:24:47.21 ID:o6cw4zyS
今マンデルブロ集合をつけたとこだぜ〜
１フレーム0.1秒ぐらいだから動画もやろうと思えばできるぜ〜
１フレーム0.1秒ぐらいだから動画もやろうと思えばできるぜ〜
142 ：Name_Not_Found：2012/05/01(火) 10:25:24.46 ID:8HyFCtKP
ズーム動画もできたぜ〜
143 ：Name_Not_Found：2012/05/01(火) 16:57:40.52 ID:???
錯覚線となってるところは
モアレ（干渉縞）と言うぞ
モアレ（干渉縞）と言うぞ
145 ：Name_Not_Found：2012/05/02(水) 10:44:42.74 ID:MmaY98zv
146 ：Name_Not_Found：2012/05/06(日) 10:23:00.08 ID:O3gv6j4V
ローレンツアトラクタもつけたぜ〜
147 ：Name_Not_Found：2012/05/06(日) 12:25:13.54 ID:???
なんでそんな色々知ってんのｗｗｗｗｗ
文系だから用語すら聞き覚えないのばっかりだな
文系だから用語すら聞き覚えないのばっかりだな
148 ：Name_Not_Found：2012/05/06(日) 12:56:45.71 ID:???
CG技術に応用されてる。フラクタルとかカオス数学のいろいろ。
149 ：Name_Not_Found：2012/05/08(火) 10:20:47.18 ID:PGbBWzNu
粒子法やろうとググッたけど５分で挫折したぜ！
150 ：Name_Not_Found：2012/05/08(火) 14:59:45.20 ID:???
151 ：Name_Not_Found：2012/05/08(火) 20:35:21.69 ID:???
googleがなんか2Dの物理エンジン出してなかったっけ?
あれ使えばできんじゃね?
あれ使えばできんじゃね?
152 ：Name_Not_Found：2012/05/08(火) 23:30:22.00 ID:???
JavaScriptで実装とかやったら流石にクッソ重くなるんじゃないだろうか
153 ：Name_Not_Found：2012/05/09(水) 00:17:57.39 ID:???
154 ：Name_Not_Found：2012/05/09(水) 10:15:59.33 ID:MhuyzbcX
155 ：Name_Not_Found：2012/05/13(日) 13:23:02.32 ID:???
畑政義写像を習得したぜ
156 ：Name_Not_Found：2012/05/13(日) 14:18:28.79 ID:???
動けばいいだけの汚らしいコードに見えて
かなり最適化されてるんだね
それとできるやつは変数関数名なんてとこはこだわらないんだなｗ
かなり最適化されてるんだね
それとできるやつは変数関数名なんてとこはこだわらないんだなｗ
157 ：Name_Not_Found：2012/05/14(月) 08:31:03.31 ID:???
>>156
そういう奴もいるだけで、必要条件でも十分条件でもない
そういう奴もいるだけで、必要条件でも十分条件でもない
158 ：Name_Not_Found：2012/05/14(月) 09:37:12.08 ID:/Espzwv+
クリフォードアトラクタもつけたぜ
もし使う時は理屈だけ見て自分で使いやすいように1からコード書いてねー
もし使う時は理屈だけ見て自分で使いやすいように1からコード書いてねー
159 ：１３１：2012/05/18(金) 12:15:33.81 ID:hNpI6/k+
エセ粒子法ができたぜ〜
160 ：Name_Not_Found：2012/05/18(金) 17:48:01.52 ID:???
地球に感動したわ
エセ地球だったけど
エセ地球だったけど
161 ：Name_Not_Found：2012/05/18(金) 22:38:07.17 ID:???
1ドット毎に違う色を指定して描画する最速の方法はどうすればいいの？
要するにブラウザが対応していない画像リーダーを作ってみたが、描画がめちゃ遅いんで。
色の指定に¨rgba(22,33,44,1)¨みたいな文字列を指定してたら、そりゃ遅いよな｡｡。
要するにブラウザが対応していない画像リーダーを作ってみたが、描画がめちゃ遅いんで。
色の指定に¨rgba(22,33,44,1)¨みたいな文字列を指定してたら、そりゃ遅いよな｡｡。
162 ：Name_Not_Found：2012/05/18(金) 23:42:58.70 ID:???
163 ：Name_Not_Found：2012/05/19(土) 07:39:54.29 ID:???
164 ：Name_Not_Found：2012/05/22(火) 10:40:09.54 ID:WuGA3iAX
グモウスキーミラ写像ができたぜ〜
165 ：Name_Not_Found：2012/05/26(土) 11:30:33.81 ID:???
9000行ェ・・
166 ：Name_Not_Found：2012/05/28(月) 11:40:12.07 ID:???
昔ロードライク作ったけど12000行だったぜ
167 ：Name_Not_Found：2012/05/28(月) 11:41:52.91 ID:???
間違えたローグライクだ
168 ：Name_Not_Found：2012/05/30(水) 08:49:24.58 ID:???
canvasって画像加工できますか？
全体の色を黒くしたり白っぽくしたり
ピクセルのrgb値を反転させたり変えて他の色調にしたり
ぼかしたりモザイクにしたりなど
さすがにバイナリレベルまでいじるのはきついので
何かAPIがあるといいのですが
なんかそういうAPIありませんでしょうか？
全体の色を黒くしたり白っぽくしたり
ピクセルのrgb値を反転させたり変えて他の色調にしたり
ぼかしたりモザイクにしたりなど
さすがにバイナリレベルまでいじるのはきついので
何かAPIがあるといいのですが
なんかそういうAPIありませんでしょうか？
169 ：Name_Not_Found：2012/05/30(水) 09:18:27.10 ID:???
ちょっとぐらい調べてから聞けクズ
170 ：Name_Not_Found：2012/05/30(水) 14:17:50.17 ID:bUb6SZEs
>>168
Canvasスレで聞くといいよ
Canvasスレで聞くといいよ
171 ：Name_Not_Found：2012/05/30(水) 14:18:23.64 ID:bUb6SZEs
ごめん、ここJSすれと間違えちゃったｗｗｗ
172 ：Name_Not_Found：2012/05/30(水) 15:51:37.44 ID: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
漸化式
パラメーターを複素数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
173 ：Name_Not_Found：2012/05/30(水) 15:52:05.05 ID:GcwkN3Kz
a=2.3 b=-0.4 c=4.5 d=2.75 の時の画像
http://up1m.ko.gs/src/koups1614.png
a=0.4 b=-1.91 c=-2.9 d=-4
http://up1m.ko.gs/src/koups1618.png
1.38, -0.8, -2.6, -1.3
http://up1m.ko.gs/src/koups1619.png
>>168
たぶんバイナリでいじったほうが楽だぜ
ただローカルから読んだ画像はいじれないから
ブラウザの設定を変えれ
http://up1m.ko.gs/src/koups1614.png
a=0.4 b=-1.91 c=-2.9 d=-4
http://up1m.ko.gs/src/koups1618.png
1.38, -0.8, -2.6, -1.3
http://up1m.ko.gs/src/koups1619.png
>>168
たぶんバイナリでいじったほうが楽だぜ
ただローカルから読んだ画像はいじれないから
ブラウザの設定を変えれ
174 ：Name_Not_Found：2012/06/09(土) 10:38:02.38 ID:???
おいおい、ここがcanvasの総合スレかよ…
part5くらい行ってるんだろうな、と思ったら全然書き込みが無いのな。
canvasを使っている人って少数派なのか？
part5くらい行ってるんだろうな、と思ったら全然書き込みが無いのな。
canvasを使っている人って少数派なのか？
175 ：Name_Not_Found：2012/06/09(土) 10:55:05.51 ID:???
別段書くことないしな
質問するにしても数えるほどしかメソッドないしググって終了
質問するにしても数えるほどしかメソッドないしググって終了
176 ：Name_Not_Found：2012/06/09(土) 13:35:39.43 ID:???
177 ：１７３：2012/06/10(日) 11:02:54.20 ID:ABo3Xo2V
でも本当に使える人間ってのは数学まっったくできないのにフォトショで面白いことができる人なんだぜ〜
178 ：Name_Not_Found：2012/06/10(日) 11:07:43.05 ID:ABo3Xo2V
131にスーパーバラ曲線をつけたぜ
これはマジですごいぜ
これはマジですごいぜ
179 ：Name_Not_Found：2012/06/13(水) 17:15:43.04 ID:EN4DvDde
透過・合成のところが参考になりました
そのまま真似してもよろしいでしょうか？
そのまま真似してもよろしいでしょうか？
180 ：Name_Not_Found：2012/06/13(水) 17:23:43.07 ID:???
バラ曲線綺麗だね
なんとか絨毯の柄みたいだ
なんとか絨毯の柄みたいだ
181 ：じゃがりきん：2012/06/14(木) 10:53:31.73 ID:zU/m6Hnn
182 ：Name_Not_Found：2012/06/14(木) 11:46:11.30 ID:zU/m6Hnn
あ
183 ：Name_Not_Found：2012/06/14(木) 21:21:56.69 ID:???
10000行超えてるんですがｗｗｗｗｗｗｗｗ
すげえな
もうライブラリ化しちゃえばいいのに
すげえな
もうライブラリ化しちゃえばいいのに
184 ：Name_Not_Found：2012/06/14(木) 22:27:12.59 ID:Kpb62vJK
185 ：Name_Not_Found：2012/06/16(土) 10:38:08.09 ID:Y1BAW2JD
ライブラリ化ってどうやるか知らないぜ〜
186 ：Name_Not_Found：2012/06/16(土) 20:01:35.80 ID:???
オブジェクトを一つ作ってネームスペースの代わりにして、そこに全部突っ込むんだ。
とりあえずは、それでおk
とりあえずは、それでおk
187 ：Name_Not_Found：2012/06/17(日) 11:33:52.53 ID:94yGOXle
わかったぜ〜
それよりバラ曲線だけ独立させてわかりやすくしたぜー
〜スーパーバラ曲線を作ろう〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=bar.html
スクショだぜ
http://up2.cache.kouploader.jp/koups1715.png
それよりバラ曲線だけ独立させてわかりやすくしたぜー
〜スーパーバラ曲線を作ろう〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=bar.html
スクショだぜ
http://up2.cache.kouploader.jp/koups1715.png
188 ：Name_Not_Found：2012/06/19(火) 15:09:51.18 ID:BKNFn4aE
スバラッ
189 ：Name_Not_Found：2012/06/22(金) 18:23:35.56 ID:???
Canvas敷居高いって本気かよ
ペラ紙１枚に収まる程度の貧弱APIなのに……
ペラ紙１枚に収まる程度の貧弱APIなのに……
190 ：Name_Not_Found：2012/06/22(金) 23:51:37.92 ID:???
おそらくペンタブと比べてみたいなニュアンスだろう
191 ：Name_Not_Found：2012/06/24(日) 01:40:16.98 ID:???
APIの少なさは敷居と関係ないのでは？
JSだってselectに数字並べて表示させるのと
アニメーション実装でグラフィカルで動的なコンテンツ作成じゃ
敷居の度合いが違うでしょう
canvasに線1本ひいて俺canvasできるんだぜとかは誰も言わない
JSだってselectに数字並べて表示させるのと
アニメーション実装でグラフィカルで動的なコンテンツ作成じゃ
敷居の度合いが違うでしょう
canvasに線1本ひいて俺canvasできるんだぜとかは誰も言わない
192 ：Name_Not_Found：2012/06/24(日) 01:47:46.66 ID:???
193 ：Name_Not_Found：2012/06/24(日) 08:08:06.02 ID:???
達人がCanvas使うとこうなる
ttp://geoquake.jp/experimental/HTML5/HTML5Shooter/
ttp://geoquake.jp/experimental/HTML5/HTML5Shooter/
194 ：Name_Not_Found：2012/06/24(日) 10:41:07.86 ID:???
>>193
すげー！iPhoneでもできた！
すげー！iPhoneでもできた！
195 ：Name_Not_Found：2012/06/24(日) 11:37:44.77 ID:???
でかいcanvasなのに速いな〜
196 ：Name_Not_Found：2012/06/24(日) 20:20:40.45 ID:???
でかいのはpngをbase64_encodeしてスクリプトに組み込んでるからだ
画像部分を消したら664kbから20kbになったぞｗ
でもまぁクロージャーコンパイラー使ってるとはいえ
20kbでこれとはすごいな
こういう作品が出れば出るほどcanvasの敷居が高く感じられる
画像部分を消したら664kbから20kbになったぞｗ
でもまぁクロージャーコンパイラー使ってるとはいえ
20kbでこれとはすごいな
こういう作品が出れば出るほどcanvasの敷居が高く感じられる
つべに動画あげて台湾人に売り込んできたぜー
198 ：Name_Not_Found：2012/06/28(木) 13:19:33.32 ID:???
魔神の人？うｒｌは？
199 ：Name_Not_Found：2012/06/28(木) 14:07:26.90 ID:???
魔神 でアップロード日で検索したら出たわ
200 ：Name_Not_Found：2012/06/28(木) 16:31:16.44 ID:???
カラパイアで紹介されてたの見た。作者は何者なんだ？
201 ：Name_Not_Found：2012/07/05(木) 20:50:33.77 ID:???
じゃがりこさんの作ったものまとめないの
202 ：じゃ ：2012/07/06(金) 12:23:31.74 ID: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
コードがさらにベタベタだぜ！
ないぜ〜
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
コードがさらにベタベタだぜ！
203 ：Name_Not_Found：2012/07/06(金) 20:48:43.47 ID:???
ソースどうにか汁ｗｗｗｗ
//ifとか書いてるけどネストしてたりすると
どこのifかさっぱりわからないと思うわこれｗｗｗ
//ifとか書いてるけどネストしてたりすると
どこのifかさっぱりわからないと思うわこれｗｗｗ
204 ：Name_Not_Found：2012/07/08(日) 12:50:25.78 ID:udMyyPfZ
ちなみにどこまで行った？
205 ：Name_Not_Found：2012/07/09(月) 07:16:34.46 ID:FuvFKy+C
ブロック崩しやっと終わった
stage25が鬼畜すぎるｗｗｗ
stage25が鬼畜すぎるｗｗｗ
206 ：Name_Not_Found：2012/08/05(日) 09:35:18.83 ID:???
新作まだぁ？
age
age
207 ：じゃ：2012/08/05(日) 12:18:23.04 ID:Y+KFicop
今>>187に魔神を追加してばっかでな〜んも作ってないぜ〜
208 ：じゃ：2012/08/15(水) 12:35:48.02 ID:zjEdFQZu
>>76を半年ぶりに見たら無駄な上に自分でも意味わかんなかったから
少ないコードでわかりやすく作り直したぜ〜
〜ブラウザだけで音を出す入門〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ot3.html
少ないコードでわかりやすく作り直したぜ〜
〜ブラウザだけで音を出す入門〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ot3.html
209 ：Name_Not_Found：2012/08/15(水) 12:42:57.51 ID:aImIa3Fi
相変わらず、糞コードだな。
210 ：Name_Not_Found：2012/09/11(火) 23:57:02.91 ID:???
211 ：Name_Not_Found：2012/09/14(金) 21:30:06.34 ID:0ZCdrfRy
>>210
さくっと見ただけだけど
複数の画像をよーいどんで読み込み→貼り付けってすると
読み込みの早い順になるから
画像読み込み→loadイベント→処理→次
ってやろうとしているんだと思う
で、キャッシュしているとloadが発火しないんじゃないかな
個人的には先に全部読み込み完了させておいてから処理するほうが好きだな
さくっと見ただけだけど
複数の画像をよーいどんで読み込み→貼り付けってすると
読み込みの早い順になるから
画像読み込み→loadイベント→処理→次
ってやろうとしているんだと思う
で、キャッシュしているとloadが発火しないんじゃないかな
個人的には先に全部読み込み完了させておいてから処理するほうが好きだな
212 ：Name_Not_Found：2012/09/15(土) 22:21:29.30 ID:???
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
213 ：Name_Not_Found：2012/09/20(木) 01:06:48.78 ID:???
今流行のABC証明をcanvasで頼む
214 ：Name_Not_Found：2012/10/16(火) 12:55:03.45 ID:mVPlxbCr
215 ：Name_Not_Found：2012/10/16(火) 13:27:46.72 ID:???
時間潰しアーマーワロタ
216 ：Name_Not_Found：2012/10/18(木) 19:11:48.40 ID:YuSwgUtq
ドラゴンタートル強ぇ
217 ：Name_Not_Found：2012/11/04(日) 10:49:00.13 ID:???
これ内部でレベルとかあがってんの？
レベルうｐ目的で全部の敵倒してみたがHP減るだけで倒し損か？
ソース見て解析しろってことですね
レベルうｐ目的で全部の敵倒してみたがHP減るだけで倒し損か？
ソース見て解析しろってことですね
218 ：Name_Not_Found：2012/11/04(日) 17:55:16.65 ID:???
HTML見ればレベルアップとかないって書いてある
219 ：Name_Not_Found：2012/11/04(日) 22:27:46.70 ID:???
質問です。
canvasのWebページをキャプチャし新しいタブに表示するプログラムがあるのですが
さらに、キャプチャした画像の色を（例として赤を緑に、青を黄色になど）変換したいと
思っているのですが手がつかず困っています。
どなたか教えて頂けませんか？
canvasのWebページをキャプチャし新しいタブに表示するプログラムがあるのですが
さらに、キャプチャした画像の色を（例として赤を緑に、青を黄色になど）変換したいと
思っているのですが手がつかず困っています。
どなたか教えて頂けませんか？
220 ：Name_Not_Found：2012/11/04(日) 22:28:33.19 ID:???
//ページ全体をキャプチャ
(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(関係あるかどうか)など調べていますがわかっていません。
よろしくお願いします。
スレチだったらすみません
(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(関係あるかどうか)など調べていますがわかっていません。
よろしくお願いします。
スレチだったらすみません
221 ：Name_Not_Found：2012/11/05(月) 14:19:12.03 ID: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ってとこでダブルクリック
後は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ってとこでダブルクリック
222 ：Name_Not_Found：2012/11/05(月) 21:14:59.99 ID:8AWmrkDb
寒天、いや寒転？
223 ：Name_Not_Found：2012/11/07(水) 12:40:48.65 ID:???
224 ：Name_Not_Found：2012/11/07(水) 13:04:49.93 ID:???
>>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を使用しています。
ボタンを押すことで→キャプチャ＋色の変換→出力
を考えています。どうにかして上記プログラムと組み合わせ？
を行いたいのですができていません。
参考にさせていただきます。ありがとうございます。
追記です。説明不足でした。
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を使用しています。
ボタンを押すことで→キャプチャ＋色の変換→出力
を考えています。どうにかして上記プログラムと組み合わせ？
を行いたいのですができていません。
参考にさせていただきます。ありがとうございます。
225 ：Name_Not_Found：2013/01/09(水) 23:10:37.40 ID:???
保守
226 ：Name_Not_Found：2013/01/10(木) 06:19:39.98 ID: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
メール [email protected]
￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥
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
メール [email protected]
￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥
227 ：Name_Not_Found：2013/01/15(火) 14:41:52.88 ID:JWS69SWh
パワハラ犯罪にたいする刑事罰(※本投稿のコピペ歓迎です)
人事原則
１ 現行法では、社員が仕事を怠けたり、能力不足、就業規則違反、目標を達成できなくても解雇をしたり叱責することは違法です。どんな駄目社員、嘘つき社員、怠け者も定年まで解雇が違法なのが現行の正社員制度です。
２ パワハラは社風にあわない社員、成績の振るわない社員を自主退職に追い込む言わば人事的措置として用いられることが多い。
※違法な解雇の和解金相場は、労働審判で３ヶ月、通常裁判で１年以上の報酬、さらに社員が和解を拒めば復職が可能です。弁護士への着手金は12〜15万円＋20%の和解金、和解拒否なら20〜50万円程度。
人事部・ホットライン・御用組合へ直訴
メリット： 一時的緩和や人事異動
デメリット： 役員へ情報筒抜け、危険分子の烙印（情報漏洩がホットライン直訴者に多いのは人事部の常識）、パワハラ放置で自主退職に追い込まれる
民事訴訟・調停・労働審判
メリット： 損害賠償
デメリット： 裁判費用、解雇措置、民事不介入で刑事事案化を阻止、長期係争、パワハラ上司の継続雇用
刑事告訴
メリット： １パワハラ上司の解雇・懲戒、または２多額の和解金、１と２どちらでも被害者の雇用は維持
デメリット： 人事異動（出世コースから外れる）
◎録音は一方の当事者が取る限り合法です。※加害者に録音の同意を求める必要はありません。
◎告訴受理後の和解金は加害者の資産・収入に応じて変えてください。犯罪者の昨年の年収の半額程度×最大懲役年数が妥当です。
◎パワハラの被害についての告訴は１侮辱罪２脅迫罪３強要罪４威力業務妨害罪５傷害罪の順序で行ってください。警察・検察の協力（犯罪者の自宅・職場の強制捜査、留置所勾留）により罪の立証が楽になります。
◎刑事告訴した社員を解雇したり処遇面で著しい差別を行うことはないでしょうが、出世や管理職以上の昇進の可能性はあきらめるべきでしょう。
◎刑事告訴は民事訴訟と違って裁判による被害者への2次被害にありません。検察庁が被害者に代わって訴えをおこすので、無料で、時間と手間も告訴状をかくことと音声録音を残すだけです。
◎和解契約（公正証書・即決和解）では告訴した事実は秘匿事項となります。犯罪者が秘密保持契約を違反した場合の損害賠償金は、最低5000万円〜にしましょう。
人事原則
１ 現行法では、社員が仕事を怠けたり、能力不足、就業規則違反、目標を達成できなくても解雇をしたり叱責することは違法です。どんな駄目社員、嘘つき社員、怠け者も定年まで解雇が違法なのが現行の正社員制度です。
２ パワハラは社風にあわない社員、成績の振るわない社員を自主退職に追い込む言わば人事的措置として用いられることが多い。
※違法な解雇の和解金相場は、労働審判で３ヶ月、通常裁判で１年以上の報酬、さらに社員が和解を拒めば復職が可能です。弁護士への着手金は12〜15万円＋20%の和解金、和解拒否なら20〜50万円程度。
人事部・ホットライン・御用組合へ直訴
メリット： 一時的緩和や人事異動
デメリット： 役員へ情報筒抜け、危険分子の烙印（情報漏洩がホットライン直訴者に多いのは人事部の常識）、パワハラ放置で自主退職に追い込まれる
民事訴訟・調停・労働審判
メリット： 損害賠償
デメリット： 裁判費用、解雇措置、民事不介入で刑事事案化を阻止、長期係争、パワハラ上司の継続雇用
刑事告訴
メリット： １パワハラ上司の解雇・懲戒、または２多額の和解金、１と２どちらでも被害者の雇用は維持
デメリット： 人事異動（出世コースから外れる）
◎録音は一方の当事者が取る限り合法です。※加害者に録音の同意を求める必要はありません。
◎告訴受理後の和解金は加害者の資産・収入に応じて変えてください。犯罪者の昨年の年収の半額程度×最大懲役年数が妥当です。
◎パワハラの被害についての告訴は１侮辱罪２脅迫罪３強要罪４威力業務妨害罪５傷害罪の順序で行ってください。警察・検察の協力（犯罪者の自宅・職場の強制捜査、留置所勾留）により罪の立証が楽になります。
◎刑事告訴した社員を解雇したり処遇面で著しい差別を行うことはないでしょうが、出世や管理職以上の昇進の可能性はあきらめるべきでしょう。
◎刑事告訴は民事訴訟と違って裁判による被害者への2次被害にありません。検察庁が被害者に代わって訴えをおこすので、無料で、時間と手間も告訴状をかくことと音声録音を残すだけです。
◎和解契約（公正証書・即決和解）では告訴した事実は秘匿事項となります。犯罪者が秘密保持契約を違反した場合の損害賠償金は、最低5000万円〜にしましょう。
228 ：Name_Not_Found：2013/02/04(月) 10:28:17.74 ID:UA1BFfVR
保守
229 ：Name_Not_Found：2013/03/06(水) 15:51:24.08 ID:0AOG3pFY
ボンバーマンもこれ使ってるの？
230 ：Name_Not_Found：2013/03/06(水) 19:10:31.53 ID:kMD4PmZG
231 ：Name_Not_Found：2013/03/06(水) 19:45:30.63 ID:???
232 ：Name_Not_Found：2013/03/06(水) 19:58:54.39 ID:???
ボンバーマンじゃないじゃん
233 ：Name_Not_Found：2013/05/21(火) 23:37:22.32 ID:???
whammy.jsというライブラリが面白い
canvasからwebm動画に変換できる
canvasからwebm動画に変換できる
234 ：Name_Not_Found：2013/06/04(火) 03:17:16.08 ID:WqEOqPrp
235 ：Name_Not_Found：2013/06/09(日) 01:04:07.62 ID:???
236 ：Name_Not_Found：2013/06/12(水) 00:30:24.34 ID:???
！
237 ：Name_Not_Found：2013/06/12(水) 00:34:59.39 ID:???
やばい・・
Uint8Array＋blob＋createObjectURLが優秀すぎる
base64encodeせずに音を出せたぜ
Uint8Array＋blob＋createObjectURLが優秀すぎる
base64encodeせずに音を出せたぜ
238 ：Name_Not_Found：2013/08/28(水) NY:AN:NY.AN ID:???
すみません。スレ違いだとは思いますがSVGについて教えてください。
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
239 ：Name_Not_Found：2013/08/28(水) NY:AN:NY.AN ID:???
>>238
スレチなので別の所で質問して下さい。
スレチなので別の所で質問して下さい。
240 ：Name_Not_Found：2013/08/28(水) NY:AN:NY.AN ID:???
すみません。スレ違いだとは思いますがSVGについて教えてください。
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
241 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:???
242 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:???
右クリックからリンク先の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
});
アラートではリンク先の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
});
243 ：Name_Not_Found：2013/09/25(水) 06:52:21.79 ID:wjQYH4m7
244 ：Name_Not_Found：2013/10/01(火) 03:58:30.33 ID:???
なるほど、相変わらずわからん
245 ：Name_Not_Found：2013/10/07(月) 02:21:41.44 ID:6JbeY9iE
新作だぜ〜
〜orbit trap探検隊〜
http://www53.atpages.jp/jagarikin/orb
スクショ
http://up2.cache.kouploader.jp/koups6941.png
一枚のHTMLからwebworkersを作って並列処理してるぜ〜
〜orbit trap探検隊〜
http://www53.atpages.jp/jagarikin/orb
スクショ
http://up2.cache.kouploader.jp/koups6941.png
一枚のHTMLからwebworkersを作って並列処理してるぜ〜
246 ：Name_Not_Found：2013/10/07(月) 13:11:22.53 ID:???
あげるならさjsdo.itだかなんかのカヤックが運営するあそこにあげてよ
247 ：245：2013/10/08(火) 02:55:04.15 ID:BYxKYpip
見てきたけどwonderflみたく左側にコード出るのかよ
俺のだと嫌がらせになるぜ〜
俺のだと嫌がらせになるぜ〜
248 ：Name_Not_Found：2013/10/12(土) 01:02:44.71 ID:???
コード管理大変そうなソースだな
改行とかあるあたりコンパイルしたってわけでもなさそうなのに
こんなコード書いてたら自分じゃ途中でわけわからなくなっちまうで
改行とかあるあたりコンパイルしたってわけでもなさそうなのに
こんなコード書いてたら自分じゃ途中でわけわからなくなっちまうで
249 ：Name_Not_Found：2013/10/22(火) 17:55:13.81 ID:QaUFyOTp
250 ：Name_Not_Found：2013/10/23(水) 02:54:58.18 ID:???
↑
バリバリjavascript
ｗ
バリバリjavascript
ｗ
251 ：Name_Not_Found：2013/10/28(月) 19:56:53.96 ID:AKTpJBEP
jsdoitに何個かあげたけどさほど伸びなかったぜ！
アトラクタ
http://jsdo.it/jagarikin/lqsy
orbittrap
http://jsdo.it/jagarikin/9wb4
2dセルオートマトン
http://jsdo.it/jagarikin/i4gX
アトラクタ
http://jsdo.it/jagarikin/lqsy
orbittrap
http://jsdo.it/jagarikin/9wb4
2dセルオートマトン
http://jsdo.it/jagarikin/i4gX
252 ：Name_Not_Found：2013/11/11(月) 13:30:52.86 ID:???
少しはソースコードがましになってるｗｗｗ
がやはり何をやってるのかさっぱりわからん
がやはり何をやってるのかさっぱりわからん
253 ：Name_Not_Found：2013/11/11(月) 21:07:54.50 ID:???
そのサイトで無改編のforkだけしてるやつなんなの
254 ：Name_Not_Found：2013/11/12(火) 10:39:47.28 ID:???
有用性のあるサイトが全くないよな。
え、これフラッシュじゃないの? というくらいのカッコいいサンプルサイトとかないのかな。
え、これフラッシュじゃないの? というくらいのカッコいいサンプルサイトとかないのかな。
255 ：２５１：2013/11/23(土) 06:06:17.92 ID:KSATDeUj
みなさんのおかげでHotCodeに食い込みました
ありがとうございます＞＜
ありがとうございます＞＜
256 ：Name_Not_Found：2014/01/13(月) 20:29:49.69 ID:???
じゃがりきんって人は数学者かなにか？
何者なんだ・・
何者なんだ・・
257 ：Name_Not_Found：2014/01/20(月) 12:35:06.31 ID:???
チョン大でユークリッド幾何教えてるって昔オフで言ってた
258 ：Name_Not_Found：2014/02/07(金) 22:01:42.13 ID:???
大きな画像をcanvasに読み込んで縮小表示するとすげージャギります。
解決策ないですかね？
<img>タグで読み込んだ画像を縮小表示するときは、アンチエイリアスが効いて綺麗に表示されるのに…。
解決策ないですかね？
<img>タグで読み込んだ画像を縮小表示するときは、アンチエイリアスが効いて綺麗に表示されるのに…。
259 ：Name_Not_Found：2014/02/08(土) 12:22:17.39 ID:???
等倍で読み込む→getImageData→自前縮小→put
260 ：Name_Not_Found：2014/02/08(土) 23:44:34.82 ID:???
>>259
レスありがとうございます。
canvasの drawImage() を使ってリサイズせずに、
別の方法で画像をリサイズしてからcanvasにはリサイズ後の画像を等倍で描画しろ、ってことですね。
自前でリサイズ処理を実装するのが難しそうだ…。
ブラウザのcanvas実装が進化して、綺麗にリサイズできるようになる日が来るのを待ちますw
レスありがとうございます。
canvasの drawImage() を使ってリサイズせずに、
別の方法で画像をリサイズしてからcanvasにはリサイズ後の画像を等倍で描画しろ、ってことですね。
自前でリサイズ処理を実装するのが難しそうだ…。
ブラウザのcanvas実装が進化して、綺麗にリサイズできるようになる日が来るのを待ちますw
261 ：Name_Not_Found：2014/02/09(日) 16:41:57.72 ID:???
drawImage()で縮小する方法として、
「いったん目的の画像と元画像の中間の大きさの画像を生成する」
っていう段階的にリサイズする手があるみたいですね。
ジャギー発生の条件が「画像の縮小率が 50% を下回る」ということらしいので、
段階的に縮小して50％を下回らないようにすればジャギらないようです。
Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する
http://jsdo.it/21f/nvIM
「いったん目的の画像と元画像の中間の大きさの画像を生成する」
っていう段階的にリサイズする手があるみたいですね。
ジャギー発生の条件が「画像の縮小率が 50% を下回る」ということらしいので、
段階的に縮小して50％を下回らないようにすればジャギらないようです。
Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する
http://jsdo.it/21f/nvIM
262 ：Name_Not_Found：2014/02/11(火) 09:37:58.89 ID:4E0HsFuc
そもそも50%以下でジャギるって仕様はどうなってんだ
バイリニア（周囲４マスしか参照しない）か？
バイリニア（周囲４マスしか参照しない）か？
263 ：Name_Not_Found：2014/02/12(水) 15:51:06.92 ID:???
画像を円形にくり抜くのって出来ないの？
264 ：Name_Not_Found：2014/02/16(日) 13:26:34.72 ID:???
円形の画像ギャラリー
http://jsdo.it/obomemo/obr0
http://jsdo.it/obomemo/obr0
265 ：じゃがりきん：2014/03/15(土) 16:06:12.32 ID:61UnCATO
266 ：Name_Not_Found：2014/03/17(月) 18:29:00.18 ID:9eq4Z8up
267 ：Name_Not_Found：2014/03/19(水) 22:16:35.80 ID:???
読めるソースになってるｗ
268 ：Name_Not_Found：2014/03/23(日) 15:46:24.23 ID:ykVxlW4K
詳しい方、おしえてください。当方、canvas初心者です。
canvasに４つの四角を描くプログラムを書いたのですが、
なぜか、４つめの枠線が薄くなります。
ソースコードを以下に上げたので、ご教示ください。m(_ _)m
ttp://sandbox323.wiki.fc2.com/wiki/canvas-test
canvasに４つの四角を描くプログラムを書いたのですが、
なぜか、４つめの枠線が薄くなります。
ソースコードを以下に上げたので、ご教示ください。m(_ _)m
ttp://sandbox323.wiki.fc2.com/wiki/canvas-test
269 ：Name_Not_Found：2014/03/23(日) 19:27:33.78 ID:???
stroke()はrect()呼び出した後に毎回呼び出さず、最後に一回だけ呼び出せばいい
270 ：Name_Not_Found：2014/03/23(日) 20:12:22.08 ID:???
>>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最新版）がおかしいんでしょうか？
レスありがとうございます。
/* 四角を描く */
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最新版）がおかしいんでしょうか？
271 ：Name_Not_Found：2014/08/01(金) 21:21:33.37 ID:rp6Y6Wdn
Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた
ttp://techracho.bpsinc.jp/morimorihoge/2014_07_29/18555
ttp://techracho.bpsinc.jp/morimorihoge/2014_07_29/18555
272 ：Name_Not_Found：2014/11/13(木) 11:21:34.25 ID:???
http://jsdo.it/jagarikin/t4Rm
じゃがりきん新作hage
じゃがりきん新作hage
273 ：Name_Not_Found：2015/02/17(火) 18:46:25.11 ID:???
幾何学の図形を描くのにCanvasは適していますか。
他にHTMLドキュメントで表現できる方法はありますか。
SVGのほうが最適でしょうか。
他にHTMLドキュメントで表現できる方法はありますか。
SVGのほうが最適でしょうか。
274 ：Name_Not_Found：2015/02/18(水) 02:18:21.48 ID:???
用途による
275 ：Name_Not_Found：2015/02/18(水) 09:35:34.76 ID:???
SVGのほうはHTMLと同じDOM操作で描くというより組み立てる感じに近い
fabric.jsってライブラリがcanvasとsvg両方に対応してる
fabric.jsってライブラリがcanvasとsvg両方に対応してる
276 ：Name_Not_Found：2015/02/18(水) 10:47:52.39 ID:???
SVGの最大の強みはスケーリング変えても画質の損失が無い事、
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事
canvasの場合全面書き換えする必要がある
あとSVGはIllustratorやInkscapeなどを使用して事前に作成(外部ファイル化)が可能
難点といえば複雑な図形では描画に少し時間がかかる点か？
しかしこれはcanvasも似たようなものか
どちらもjpegやpngなどラスター画像を組み込む事も出来るので全てを描画する必要は無い
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事
canvasの場合全面書き換えする必要がある
あとSVGはIllustratorやInkscapeなどを使用して事前に作成(外部ファイル化)が可能
難点といえば複雑な図形では描画に少し時間がかかる点か？
しかしこれはcanvasも似たようなものか
どちらもjpegやpngなどラスター画像を組み込む事も出来るので全てを描画する必要は無い
278 ：Name_Not_Found：2015/02/18(水) 18:39:27.09 ID:???
arcメソッドを使う場合はbeginPathもclosePathもいらないと思うんですが、使う理由は何ですか？
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです
279 ：Name_Not_Found：2015/02/18(水) 19:01:57.68 ID:???
>>278
ここのサンプル眺めてればなんとなく理由がわかると思う
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
ここのサンプル眺めてればなんとなく理由がわかると思う
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
280 ：Name_Not_Found：2015/02/18(水) 19:04:55.07 ID:???
moveToでサブパスが発生するから
281 ：Name_Not_Found：2015/02/18(水) 20:40:00.31 ID:???
arcだけしか使わない場合ならmoveToは不要だと思うんですよ
282 ：Name_Not_Found：2015/02/18(水) 20:40:43.54 ID:???
283 ：Name_Not_Found：2015/02/18(水) 20:41:55.38 ID:???
arcで複数の円を作る場合ならmoveToはいらないという話です
矩形やlineToなどを使う場合は別です
矩形やlineToなどを使う場合は別です
284 ：Name_Not_Found：2015/02/18(水) 20:52:23.53 ID:???
fillやstroke、closePathを呼び出すまでarcを複数回呼び出した場合、それは１つのパス、って事
285 ：Name_Not_Found：2015/02/18(水) 23:23:10.78 ID:???
真円ならいらないね
弧だけなら線と組み合わせる場合があるからいる
弧だけなら線と組み合わせる場合があるからいる
286 ：Name_Not_Found：2015/02/19(木) 09:17:47.89 ID:???
moveToが要る要らないじゃなくて、要るとき底辺コーダーが罠に嵌らないように、ご丁寧にそういうサンプルコードが書かれてるんだよ
で、そのサンプルが伝播して『ほとんどのサンプルコードには使われている』状態になってる
大元がどこかは分かるだろ
で、そのサンプルが伝播して『ほとんどのサンプルコードには使われている』状態になってる
大元がどこかは分かるだろ
287 ：Name_Not_Found：2015/02/19(木) 09:28:11.26 ID:???
fill,stroke,closePathが不要なのはfillRect,strokeRect,clearRectだけだね
288 ：Name_Not_Found：2015/02/19(木) 10:03:16.78 ID:???
ベクターグラフィックシステムの設計の根底にタートルグラフィックの考え方があります
この辺も読んでおくとよいでしょう
https://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx
この辺も読んでおくとよいでしょう
https://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx
289 ：Name_Not_Found：2015/02/19(木) 12:25:47.01 ID:???
左○を白と黒のグラデーションにして、右○を赤と黒のグラデーションにしたいんですが
左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
http://jsfiddle.net/cq2nLqhy/
どう直したらいいのか教えて下さい
左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
http://jsfiddle.net/cq2nLqhy/
どう直したらいいのか教えて下さい
290 ：Name_Not_Found：2015/02/19(木) 12:52:03.15 ID:???
291 ：Name_Not_Found：2015/02/19(木) 13:06:35.12 ID:???
それと話題それるけどそのサイトいいね
ログインしなくても投稿できるのか
ログインしなくても投稿できるのか
292 ：Name_Not_Found：2015/02/19(木) 13:20:56.56 ID:???
こうですか？左○のグラデーションが効くようになったんですけど右○は相変わらずグラデーションが効きません
あとパフォーマンスの観点からfillを一度だけ呼びたいんですけど無理なんでしょうか？
http://jsfiddle.net/cq2nLqhy/3/
あとパフォーマンスの観点からfillを一度だけ呼びたいんですけど無理なんでしょうか？
http://jsfiddle.net/cq2nLqhy/3/
293 ：Name_Not_Found：2015/02/19(木) 13:31:35.57 ID:???
createRadialGradientの座標がどちらも一緒になってるよ
下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな？
あとfillでパスは閉じるのでclosePathは不要
下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな？
あとfillでパスは閉じるのでclosePathは不要
294 ：Name_Not_Found：2015/02/19(木) 13:38:29.79 ID:???
あ、あと円グラデーションの終了点がかなり外側だから黒になり切らないね
100じゃなくて50じゃ？
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);
100じゃなくて50じゃ？
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);
295 ：Name_Not_Found：2015/02/19(木) 14:01:04.90 ID:???
アドバイス受けて修正したら今度は右○は効くようになったのに左○が効かなくなりました
http://jsfiddle.net/cq2nLqhy/4/
http://jsfiddle.net/cq2nLqhy/4/
296 ：Name_Not_Found：2015/02/19(木) 14:11:46.21 ID:???
297 ：Name_Not_Found：2015/02/19(木) 15:16:42.67 ID:???
なるほど、勉強になりました
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね
298 ：Name_Not_Found：2015/02/20(金) 17:44:11.41 ID:???
rotateで複数のグラフィックをそれぞれ中心で回転したい場合ってその数だけcanvas要素を作らないとだめですか？
http://tech.kayac.com/archive/canvas-tutorial.htmlの長方形が回転するサンプルのtranslate,rotate ,translateの後にfillRectを複数並べると
惑星が回るようになってしまいました
風車みたいなものをつくりたいんですが
http://jsdo.it/shitman/sDTZのサンプルではcanvas要素を複数用意してたのでやっぱり複数要素作らないだめですか？
http://tech.kayac.com/archive/canvas-tutorial.htmlの長方形が回転するサンプルのtranslate,rotate ,translateの後にfillRectを複数並べると
惑星が回るようになってしまいました
風車みたいなものをつくりたいんですが
http://jsdo.it/shitman/sDTZのサンプルではcanvas要素を複数用意してたのでやっぱり複数要素作らないだめですか？
299 ：Name_Not_Found：2015/02/20(金) 18:42:35.34 ID:???
よくわからん。
１つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん？
１つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん？
300 ：Name_Not_Found：2015/02/20(金) 19:09:15.65 ID:???
>>298
save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが
save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが
301 ：Name_Not_Found：2015/02/20(金) 22:59:29.39 ID:???
多分そんな感じで作ったんですが最初から作りなおしたらできました。
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます
302 ：Name_Not_Found：2015/02/20(金) 23:26:44.32 ID:???
translateで横に100ずらしたいのに、何故かxとyの分だけ余計にずれてます
http://jsfiddle.net/0fs1dhfj/
座標10:10に100x100の正方形を描画して、右方向に100ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか？
http://jsfiddle.net/0fs1dhfj/
座標10:10に100x100の正方形を描画して、右方向に100ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか？
303 ：Name_Not_Found：2015/02/20(金) 23:35:20.08 ID:???
>>302
いや、10ずつ足してるじゃん・・・
いや、10ずつ足してるじゃん・・・
304 ：Name_Not_Found：2015/02/20(金) 23:44:36.73 ID:???
理解できました
translateで移動した位置が座標0:0となるんですね
translateで移動した位置が座標0:0となるんですね
305 ：Name_Not_Found：2015/02/21(土) 10:17:56.11 ID:???
transformって歴史的な理由で残されてるってw3cに書いてあったけどその歴史的な理由知ってる？
306 ：Name_Not_Found：2015/02/22(日) 20:23:32.30 ID:???
それを語るなら秦の始皇帝まで遡る事になるが良いかな？
307 ：Name_Not_Found：2015/02/22(日) 20:52:38.66 ID:???
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メソッドをそれぞれ呼んだほうが扱いやすい気がする
アフィン変換、行列変換の事を言ってるんだろうか？
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でやると知識がないと無理
中途半端なのがtransformである
奥行きをつけるのにcssからなら楽勝だがcanvasでやると知識がないと無理