2013年01月Web制作21: Canvasについて語ろう (227) TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
SOHOやフリーで本当に細々と食ってる奴の68人目 (233)
【朝目】他力本願サイトが憎い【新聞】５ (581)
雑談スレ (402)
スパム業者のIPブラックリスト (669)
ホームページ作ったらどうやって宣伝してる？ (485)
■ページランク(GooglePageRank)について Part4■ (804)

Canvasについて語ろう


1 ：2011/05/11 ～ 最終レス ：2013/01/15
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

2 ：
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

3 ：
■関連スレ
【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 ：
そして誰も語らないのであった
===========完===========

5 ：
語るにしてもcanvasについてより描画アルゴリズムについてだろうね

6 ：
そんな限定的な話題にしたらもっと廃れるぞｗ

7 ：
FAQっぽいものを充実させてください
　 ┌──┐
┌┴┐　 ├┐
│　 ├┬┘│
│┌┴┤　 │
└┤　 └┬┘
　 └──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか

8 ：
今やってる勉強が終わったらサンプル載せてってやるから待ってろ

9 ：
※デフォルトでは読み込んだ画像のデータをputImageData()できません
これさえなけりゃ気合いで何でもありにできるのにな

10 ：
間違えたgetだった

11 ：
>7は普通に３次元空間では可能
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる

12 ：
矩形や画像を2dで>>7みたいに配置するのは無理じゃないの
http://himajin.moe-nifty.com/photos/uncategorized/2007/10/18/damashi005.jpg
こういうだまし絵の立体みたいに
一部を切断して繋がってるように見せかけるような方法くらいしか思いつかないけどそれはもうベツモノだし

13 ：
と言ったものの
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか

14 ：
そういやgetContextの引数2dしかみたことないけど3dとかあるのかすら

15 ：
それぐらい日本語和訳みれば3dあるかどうかわかるだろ・・・

16 ：
ケンカうってんの？

17 ：
つ 'webgl'

18 ：
w3cが言ってたwebGLの致命的な欠陥ってどうなったんだ？
なんとかしてくんなきゃ手が出せないぜ

19 ：
(x1,y1) (x2,y2) (x3,y3) (x4,y4)の各四点に四隅が一致した画像ファイルを貼付けるにはどうすればいいでしょうか。
対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか？

20 ：
これモノクロにしたりするの時間かかるね

21 ：
age

22 ：
https://markup.mozilla.org/ja/#/
これなんかすげえな

23 ：
そのうちフォトショとかシーケンサの代わりになるサイトが出るな

24 ：
http://ultra-zone.net/canvas

25 ：
>>24
特におもしろみもないフツーのものでした

26 ：
<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>
赤い円の中を四角で切り抜いて
切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
あと下の緑の四角と水色の四角も切り抜いた赤い円の内側から見えるようにしたいです

27 ：
＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
これがどういう意味かよくわかんなからそれ以外の部分だけ
http://ideone.com/AZtYY

28 ：
>>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>

29 ：
切り抜き部分の透過はsave()、restore()使えばひとつのcanvasでできそうだけど無理かな

30 ：
>>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();

31 ：
rect()が時計回りに定義されてるから、円弧を反時計回りにして
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);
とシンプルにもできる
clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい

32 ：
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか？

33 ：
>>30-31
イメージ通りの結果です！ありがとうございますm(_ _)m
> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしに>>30のほうをtrueに、>>31のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます

34 ：
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これ理解できました
本当にどうもありがとうございます

35 ：
canvasで文字列を画像として出すのってどーやんの？

36 ：
https://developer.mozilla.org/ja/Drawing_text_using_a_canvas

37 ：
中が塗りつぶされた五芒星を描画しなさい

38 ：
fillText("★", 0, 0);

39 ：
>>38
想定してなかったが大正解だな

40 ：
https://developer.mozilla.org/ja/Canvas_tutorial/Using_images#section_7
> 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか？
コードが短くなるというだけで速度とかは逆に遅くなる？

41 ：
canvasの例文wikiみたいなのやれば儲かるよ今ならね

42 ：
MDCでおｋ
html5.jpでおｋ
ってのが世間の風潮

43 ：
そこらは例文というか解説
俺もやろうか考えたけど面倒くさいからやってない

44 ：
ブログでゲームの作り方の解説はしたが
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね

45 ：
そのゲーム解説はJavascriptすか

46 ：
canvasでsvg女子みたいに人体描画しようとした奴いる？

47 ：
x,y,zを渡すと直方体を描画する関数を作成しなさい。

48 ：
　　　　　　　　＼　　ヽ　　　　　! |　　　　 /
　　　　　＼　　　　ヽ　　　ヽ　　　　　　　/　　　　/　　 　 　 ／
　　　　　　　　お断りだああああああああああぁぁぁ！！
　　　　　　　　＼　　　　　　　　　　｜　 　 　 　 /　　　／
　　　　　　　　　 　 　 　 　 　 　 　 ,ｲ
￣　--　　=　＿　　　　　　　　 　 / |　　　　　　　　　　　　　 --'''''''
　　　　　　　　　　,,, 　 　 ,r‐､λノ　 ﾞi､_,､ﾉゝ　　　　　-　￣
　　　　　　　　　　　　　　ﾞl　　 　 　　 　 　 ﾞ､_
　　　　　　　　　　　　　 .j´　.　.ﾊ_, ,_ﾊ　　　（.
　　　　─　　　＿　　─ {　 　 (ﾟωﾟ　）　　 /─　　　＿　　　　　─
　　　　　　　　　　　　　　 ).　 c/　　 ,つ 　 ,l~
　　　　　　　　　　　　　 ´y　　｛ ,、 ｛　 　 <
　　　　　　　　　　　　　　 ゝ 　 lﾉ ヽ,)　　 ,

49 ：
>47
それはどのレベルまでやるんだ？
簡易設計図みたいに遠近法もなしの線だけでできた直方体か？
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる

50 ：
直方体っぽくなればどんなのでもよしとします。
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。

51 ：
関係ないけど画像のrgb値を調べる装置を作ったぜ
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=iro.html

52 ：
Canvasって数値配列に直接対応するフレームバッファを持っていたりするから、レンダリングは全部ソフトウエアでやるんですよね？
CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・
やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか？

53 ：
>>52
大きい面積を塗りつぶすなどする場合はかなり遅くなると思います。
IE9だとFirefox5とかに比べて速いのでハードウェアアクセラレーションが効いているのかもしれません。

54 ：
ttp://www.ibm.com/developerworks/jp/web/library/wa-html5fundamentals4/

55 ：
canvasに動的に画像を作らせたぜ！
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=syk.html

56 ：
>55
おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)ｲｲ

57 ：
それをやると無理やり変化させてるのがモロバレなんだぜ

58 ：
putImageData使えば、グラフィックソフト張りにいろいろできるじゃん、て思って実験してみました
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト
結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定
・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます
正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです
JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー

59 ：
Workerの使い方が下手なだけ

60 ：
ふむ
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生

61 ：
みんな似たようなこと考えてんな
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ

62 ：
IE9にしたらネイティブアプリ並になるよ

63 ：
いろいろ調べてた所、大きな数の添字アクセスって高コストなんですね
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました
置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね
そのあたりをうまくやれば改善できるかもです
IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、；

64 ：
webGLに欠陥が見つかったとき、IEが対応させてもねーのに懸念を表明した時は何様だと思った

65 ：
質問です
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。

66 ：
自己解決しました
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 ：
つづき
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....

68 ：
訂正
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。

69 ：
2時間で自己解決する男の人って

70 ：
ザ他力本願

71 ：
>>37
>>38
過去ログから順番に見てたが爆笑したｗ

72 ：
audio + canvasでゲーム作ったぜ！
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=hos.html


73 ：
すげえけどソースが汚ねえ

74 ：
>>72
よく出来てるんだけど
ルールがいまいちわからん

75 ：
保守

76 ：
うは～
audioで波形作ってcanvasで表示させたぜ～
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=oto2.html

77 ：
すげー！
と思ってコード見たら読みづれぇぇ！
これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる？

78 ：
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を紹介しているサイトでは綺麗にピクセル単位で指定できると書いてあったので戸惑っています。

79 ：
>>78
面倒くさいから
そのままコピペして動けるものを一式張って

80 ：
ありがとございます。
http://ailinksh.kojyuro.com/minigame3/hosizoraTest.html
私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。

81 ：
>>80
きめえコードだな
俺様が手直してしてやるからまってろ

82 ：
がーん、きめえ。
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。

83 ：
>>80
ほらよ
http://codepad.org/VS1I0oix

84 ：
>83
あのページ開けませんけど？
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。

85 ：
>>77
あってるぜ
waveヘッダー（コピペ）に配列くっつけてbase64エンコード（コピペ）して
dataスキームでaudioのsrcにぶっこんで鳴らしてるぜ

86 ：
画像を読み込んでCanvasに表示させると
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様？

87 ：
>>85
今すぐどうこうじゃないけど
そのうち音鳴らすことがあった時
パクっていい？

88 ：
いいぜ

89 ：
>>88
出来たらgithubにあげて有名人になってください

90 ：
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
相変わらずRすぎて困る

91 ：
こっちにも貼ろうとしたら見つかってたぜー

92 ：
var image = document.createElement('img');
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る？
保存させるときに名前付いてないのが困る

93 ：
cgiに画像名とdataURLを投げてファイル化して
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼

94 ：
>>90
putImageDataで透過出来てるってどういうことなの・・・

95 ：
ちょっと違うけど簡単に書くとこうだぜ！
1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput
1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ！

96 ：
concat()で.dataの高速複製ができたらいいんだけどな

97 ：
ピクセル単位で合成してたんだな
いつも
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 ：
たぶん大量に透過させない限りcanvasの機能使ったほうが早いぜ～

99 ：
勉強になりやした
ぜ～の人ありがとう

100 ：
canvasマリオがレベル高過ぎて吹いたぜー
ってかあれどうなってんの？？
setTimeoutとか使ってないっぽいんだけど

101 ：
自己解決しますた。。普通にinterval使ってました

102 ：
HTML5のCanvasの勉強にペイントのようなものを作っているのですが、
lineWidthを太くすると、
http://f.hatena.ne.jp/ogatashi/20110605130608
このような線になってしまいます。
これは何が原因で、どのように対策すればいいのでしょうか?
http://ascii.jp/elem/000/000/513/513377/index-4.html
を参考に作っています。

103 ：
その都度begin()stroke()begin()stroke()ってやってる？

104 ：
mousemoveにイベントハンドラを設定し、
beginPath
moveTo
lineTo
stroke
closePath
の処理を繰り返しております。
素早くマウスを動かすとスムースな線が引かれ、ゆっくり動かすとリンク先のようになるため
mousemoveイベントが1px毎に発生し、1pxの太い幅が引かれそのようにトゲトゲのような
ものになっているのかと思います。

105 ：
じゃ前回の位置からの距離はかって
最低いくつなら線引くってやればいんじゃね
距離=Math.pow((前回X-今X)*(前回X-今X)+(前回Y-今Y)*(前回Y-今y),0.5)

106 ：
>>105
ありがとうございます
私もそれを考えてみたのですが、
その最低の距離を大きくすると、小さな角を持った線が引けなくなり、
小さくすると、少し太くなるものの同じような状態になります。
また、大きくした状態でも、いろいろな角度に移動させると同じような状態になります。

107 ：
隙間が開くのは当たり前なんだが。
目で見て納得できるようにjsをこうしてみ。
http://ideone.com/li1ot
あとな、原因を追求するときはちゃんとログを取るように。
～かと思います、で済ませるなよ。
対策は、自分で四辺形を描くしかない。

108 ：
rectで書いたら角が円にならずにカクカクにならない?

109 ：
線引くたびにclosePathしてんだから、どっちにしろ角は丸くならねえよ
mousedown時にbeginPath(), moveTo()
mouseup時にclosePath()すればいい

110 ：
>>109
ありがとうございます
そのように書いてみたのですが、mouseupしたときに引かれる線は以前と同じでした。

111 ：
http://ideone.com/E12Py

112 ：
>>102
曲がり角に太さを直径とする円を描画すればなめらかになるぜ

113 ：
やっとピンボールっぽくなったぜ
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=pin.html

114 ：
<hed>になってるけど
ちゃんとピンボールになっててワロタ
物理屋7日？

115 ：
すごいな
もはやわけわからんくて手がつかれた
462万点
5000行とか読む気も失せるわｗｗｗｗ

116 ：
>>114
うはｗ今までまっったく気づかなかったぜ！
直したぜ

117 ：
Canvasの上でマウスをクリックしたら、クリックした位置に点を表示させたいのですが、
クリックされた座標で点を表示すると、マウスカーソルの右下に点が表示されます。
これをマウスアイコンの左上か、中心にするにはどうすればいいでしょうか?
座標をずらせばいいことまでは考えついたのですが、なにか方法があるのでしょうか?
マウスカーソルのサイズ取得の方法などはあるのでしょうか?

118 ：
すみません記載漏れがありました。
もう一点ご質問なのですが、クリックすると点が表示されるのですが、クリックしたままドラッグをすると、カーソルアイコンがテキスト選択のアイコンになってしまいます。
cssのcursor以外にドラッグ中のアイコンを指定する方法などあるのでしょうか?
独自カーソルを設定しても、ドラッグ中はテキスト選択アイコンになってしまいます。


119 ：
コードぐらい出したらどうなんだ

120 ：
通常はマウス座標をとると矢印のさきっちょの座標が返ってきます。
おそらく描画する時にcanvasのtopとleft分を足していないのでしょう。

121 ：
満喫のハイスペックPCでcanvas二枚重ねにしたらputImageDataでもなんか透過できたわ

122 ：
HTMLの画像化はサーバサイドかブラウザの拡張機能権限じゃないと無理ですか

123 ：
無理だね。
DOMをCanvas内に描けるようにしようって提案もちらっと聞いたことあるけど、
もしそれができるようになったとしても、同一生成元とかの関係でピクセル取り出せるようになるのは望み薄かも。

124 ：
なんでダメなんだろ
セキュリティー？
それが出来たらどのブラウザでも文字のラスターがとれるのに

125 ：
toDataURLしてどっかに送信することでプライバシを容易く侵害出来るからだろ

126 ：
意図しない外部のスクリプトが読み込まれてるのなら画像化しなくても侵害されるんでないの
パスワードとか入力欄だけ初期状態でキャプチャすればいいような

127 ：
いま外部のスクリプトとかそんな話してない

128 ：
自分のサイトの画面をキャプチャして何が問題なのかわからない
問題と思われるのは訪問済みかどうかの状態、フォームへの入力内容、greasemonkey等での変更、くらい？
訪問済みとフォームへの入力はキャプチャ実行時にブラウザ側で初期状態にすればいいし
greasemonkey等でのDOM等の操作はキャプチャしなくても取得できるし・・・
ここで言ったところでどうにもならないけど

129 ：
どっかページ開く→ローカルにある画像かたっぱしっから読み込み→スクショ→どっか送信

130 ：
そういう状況じゃ使えなくしたらいいじゃん
webGL問題もそうして解決したんでしょ

131 ：
無駄テクをまとめたぜ～
ttp://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ana.html

132 ：
ありがたやありがたや

133 ：
さすがに今回のGoogleさんのロゴはIE8には対応できなかったみたいだな
まぁめんどくさくてしなかっただけかもしれないけど

134 ：
相変わらずソース汚いな

135 ：
連続ベジェもつけたぜ

136 ：
>>134
就職できるぞ

137 ：
パーリンノイズ習得したら炎描画がすごいことになったぜ～

138 ：
数学スキル高すぎるな
中学レベルで止まってるからわけわからーん／(^o^)＼
マンデルブロー集合をズームしていくやつとか作れたらかっこいいよね

139 ：
物理屋だろ

140 ：
物理と数学の違いがわからない

141 ：
今マンデルブロ集合をつけたとこだぜ～
１フレーム0.1秒ぐらいだから動画もやろうと思えばできるぜ～

142 ：
ズーム動画もできたぜ～

143 ：
錯覚線となってるところは
モアレ（干渉縞）と言うぞ

144 ：
>>141
そんな簡単にやってのけちゃうなんてまじかっけー
色までついてるし感動した

145 ：
うは～
ブッダブロもできたぜ～
>>143
サンクス！直したぜ～

146 ：
ローレンツアトラクタもつけたぜ～

147 ：
なんでそんな色々知ってんのｗｗｗｗｗ
文系だから用語すら聞き覚えないのばっかりだな

148 ：
CG技術に応用されてる。フラクタルとかカオス数学のいろいろ。

149 ：
粒子法やろうとググッたけど５分で挫折したぜ！

150 ：
ttp://www.youtube.com/user/NURSSKYWALKER
こんなやつか
そらわからんわ

151 ：
googleがなんか2Dの物理エンジン出してなかったっけ?
あれ使えばできんじゃね?

152 ：
JavaScriptで実装とかやったら流石にクッソ重くなるんじゃないだろうか

153 ：
そんな事ない
http://box2d-js.sourceforge.net/index2.html

154 ：
リアプノフフラクタルをつけたぜ～
>>153
これこれ
どうやってるかわかんないぜ！

155 ：
畑政義写像を習得したぜ

156 ：
動けばいいだけの汚らしいコードに見えて
かなり最適化されてるんだね
それとできるやつは変数関数名なんてとこはこだわらないんだなｗ

157 ：
>>156
そういう奴もいるだけで、必要条件でも十分条件でもない

158 ：
クリフォードアトラクタもつけたぜ
もし使う時は理屈だけ見て自分で使いやすいように1からコード書いてねー

159 ：
エセ粒子法ができたぜ～

160 ：
地球に感動したわ
エセ地球だったけど

161 ：
1ドット毎に違う色を指定して描画する最速の方法はどうすればいいの？
要するにブラウザが対応していない画像リーダーを作ってみたが、描画がめちゃ遅いんで。
色の指定に¨rgba(22,33,44,1)¨みたいな文字列を指定してたら、そりゃ遅いよな｡｡。

162 ：
>>161
つかったことないけどこれ？
ttp://www.w3.org/TR/2dcontext/#imagedata

163 ：
>>162
うぉお！こんなんあったのか。超速くなったありがとう！
これからはちゃんとw3のページも確認するよ。

164 ：
グモウスキーミラ写像ができたぜ～

165 ：
9000行ェ・・

166 ：
昔ロードライク作ったけど12000行だったぜ

167 ：
間違えたローグライクだ

168 ：
canvasって画像加工できますか？
全体の色を黒くしたり白っぽくしたり
ピクセルのrgb値を反転させたり変えて他の色調にしたり
ぼかしたりモザイクにしたりなど
さすがにバイナリレベルまでいじるのはきついので
何かAPIがあるといいのですが
なんかそういうAPIありませんでしょうか？

169 ：
ちょっとぐらい調べてから聞けクズ

170 ：
>>168
Canvasスレで聞くといいよ

171 ：
ごめん、ここJSすれと間違えちゃったｗｗｗ

172 ：
適当にいじってたらオリジナルのアトラクタができたぜ～
漸化式
パラメーターを複素数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 ：
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
たぶんバイナリでいじったほうが楽だぜ
ただローカルから読んだ画像はいじれないから
ブラウザの設定を変えれ

174 ：
おいおい、ここがcanvasの総合スレかよ…
part5くらい行ってるんだろうな、と思ったら全然書き込みが無いのな。
canvasを使っている人って少数派なのか？

175 ：
別段書くことないしな
質問するにしても数えるほどしかメソッドないしググって終了

176 ：
canvasは意外に敷居が高くて無理ポ
というより>>173の人見ればわかるけど
描画処理は文系理系の差が出る分野だからな
自由自在にできる>>173の中の人が羨ましいわ

177 ：
でも本当に使える人間ってのは数学まっったくできないのにフォトショで面白いことができる人なんだぜ～

178 ：
131にスーパーバラ曲線をつけたぜ
これはマジですごいぜ

179 ：
透過・合成のところが参考になりました
そのまま真似してもよろしいでしょうか？

180 ：
バラ曲線綺麗だね
なんとか絨毯の柄みたいだ

181 ：
>>179
いいぜ
でもまだ高速化できるからあれ見て自分で考えるといいぜ～

182 ：
あ

183 ：
10000行超えてるんですがｗｗｗｗｗｗｗｗ
すげえな
もうライブラリ化しちゃえばいいのに

184 ：
>>181
がんがるぜ～

真似してみた

185 ：
ライブラリ化ってどうやるか知らないぜ～

186 ：
オブジェクトを一つ作ってネームスペースの代わりにして、そこに全部突っ込むんだ。
とりあえずは、それでおk

187 ：
わかったぜ～
それよりバラ曲線だけ独立させてわかりやすくしたぜー
～スーパーバラ曲線を作ろう～
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=bar.html

スクショだぜ
http://up2.cache.kouploader.jp/koups1715.png

188 ：
スバラッ

189 ：
Canvas敷居高いって本気かよ
ペラ紙１枚に収まる程度の貧弱APIなのに……

190 ：
おそらくペンタブと比べてみたいなニュアンスだろう

191 ：
APIの少なさは敷居と関係ないのでは？
JSだってselectに数字並べて表示させるのと
アニメーション実装でグラフィカルで動的なコンテンツ作成じゃ
敷居の度合いが違うでしょう
canvasに線1本ひいて俺canvasできるんだぜとかは誰も言わない

192 ：
>>187はすごいな
古いPCからスタートおしたら死にそうになったけど
一番右下からタヌキ　ライオン　フクロウに見えないでもない

193 ：
達人がCanvas使うとこうなる
ttp://geoquake.jp/experimental/HTML5/HTML5Shooter/

194 ：
>>193
すげー！iPhoneでもできた！

195 ：
でかいcanvasなのに速いな～

196 ：
でかいのはpngをbase64_encodeしてスクリプトに組み込んでるからだ
画像部分を消したら664kbから20kbになったぞｗ
でもまぁクロージャーコンパイラー使ってるとはいえ
20kbでこれとはすごいな
こういう作品が出れば出るほどcanvasの敷居が高く感じられる

197 ：
つべに動画あげて台湾人に売り込んできたぜー

198 ：
魔神の人？うｒｌは？

199 ：
魔神　でアップロード日で検索したら出たわ

200 ：
カラパイアで紹介されてたの見た。作者は何者なんだ？

201 ：
じゃがりこさんの作ったものまとめないの

202 ：
>>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

コードがさらにベタベタだぜ！

203 ：
ソースどうにか汁ｗｗｗｗ
//ifとか書いてるけどネストしてたりすると
どこのifかさっぱりわからないと思うわこれｗｗｗ

204 ：
ちなみにどこまで行った？

205 ：
ブロック崩しやっと終わった
stage25が鬼畜すぎるｗｗｗ

206 ：
新作まだぁ？
age

207 ：
今>>187に魔神を追加してばっかでな～んも作ってないぜ～

208 ：
>>76を半年ぶりに見たら無駄な上に自分でも意味わかんなかったから
少ないコードでわかりやすく作り直したぜ～

～ブラウザだけで音を出す入門～
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ot3.html

209 ：
相変わらず、糞コードだな。

210 ：
ttp://www.riaxdnp.jp/?p=1570
この解説が断片的でわからないんですよ。コピペしても動かない。
誰か動くサンプル書いてくれませんか。

211 ：
>>210
さくっと見ただけだけど
複数の画像をよーいどんで読み込み→貼り付けってすると
読み込みの早い順になるから
画像読み込み→loadイベント→処理→次
ってやろうとしているんだと思う
で、キャッシュしているとloadが発火しないんじゃないかな
個人的には先に全部読み込み完了させておいてから処理するほうが好きだな

212 ：
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R　
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R
創価R

213 ：
今流行のABC証明をcanvasで頼む

214 ：
ゲーム作ったぜ～
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=ore.html

215 ：
時間潰しアーマーワロタ

216 ：
ドラゴンタートル強ぇ

217 ：
これ内部でレベルとかあがってんの？
レベルうｐ目的で全部の敵倒してみたがHP減るだけで倒し損か？
ソース見て解析しろってことですね

218 ：
HTML見ればレベルアップとかないって書いてある

219 ：
質問です。
canvasのWebページをキャプチャし新しいタブに表示するプログラムがあるのですが
さらに、キャプチャした画像の色を（例として赤を緑に、青を黄色になど）変換したいと
思っているのですが手がつかず困っています。
どなたか教えて頂けませんか？


220 ：
//ページ全体をキャプチャ
(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 ：
スクショできるの知らんかったけどスクショして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ってとこでダブルクリック

222 ：
寒天、いや寒転？

223 ：
>>221
どうもありがとうございます。
ちょっと動作確認してきます。
本当にありがとうございます。

224 ：
>>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を使用しています。
ボタンを押すことで→キャプチャ＋色の変換→出力
を考えています。どうにかして上記プログラムと組み合わせ？
を行いたいのですができていません。
参考にさせていただきます。ありがとうございます。

225 ：
保守

226 ：
　　★★★チベットの独立は日本の核心的利益である★★★
　　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

　　￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥

227 ：2013/01/15
パワハラ犯罪にたいする刑事罰(※本投稿のコピペ歓迎です)
人事原則
１　現行法では、社員が仕事を怠けたり、能力不足、就業規則違反、目標を達成できなくても解雇をしたり叱責することは違法です。どんな駄目社員、嘘つき社員、怠け者も定年まで解雇が違法なのが現行の正社員制度です。
２　パワハラは社風にあわない社員、成績の振るわない社員を自主退職に追い込む言わば人事的措置として用いられることが多い。
※違法な解雇の和解金相場は、労働審判で３ヶ月、通常裁判で１年以上の報酬、さらに社員が和解を拒めば復職が可能です。弁護士への着手金は12～15万円＋20%の和解金、和解拒否なら20～50万円程度。
人事部・ホットライン・御用組合へ直訴
メリット：　一時的緩和や人事異動
デメリット：　役員へ情報筒抜け、危険分子の烙印（情報漏洩がホットライン直訴者に多いのは人事部の常識）、パワハラ放置で自主退職に追い込まれる
民事訴訟・調停・労働審判
メリット：　損害賠償
デメリット：　裁判費用、解雇措置、民事不介入で刑事事案化を阻止、長期係争、パワハラ上司の継続雇用
刑事R
メリット：　１パワハラ上司の解雇・懲戒、または２多額の和解金、１と２どちらでも被害者の雇用は維持
デメリット：　人事異動（出世コースから外れる）
◎録音は一方の当事者が取る限り合法です。※加害者に録音の同意を求める必要はありません。
◎R受理後の和解金は加害者の資産・収入に応じて変えてください。犯罪者の昨年の年収の半額程度×最大懲役年数が妥当です。
◎パワハラの被害についてのRは１侮辱罪２脅迫罪３強要罪４威力業務妨害罪５傷害罪の順序で行ってください。警察・検察の協力（犯罪者の自宅・職場の強制捜査、留置所勾留）により罪の立証が楽になります。
◎刑事Rした社員を解雇したり処遇面で著しい差別を行うことはないでしょうが、出世や管理職以上の昇進の可能性はあきらめるべきでしょう。
◎刑事Rは民事訴訟と違って裁判による被害者への2次被害にありません。検察庁が被害者に代わって訴えをおこすので、無料で、時間と手間もR状をかくことと音声録音を残すだけです。
◎和解契約（公正証書・即決和解）ではRした事実は秘匿事項となります。犯罪者が秘密保持契約を違反した場合の損害賠償金は、最低5000万円～にしましょう。
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
関東圏のＷｅｂ作成会社 (379)
スパム業者のIPブラックリスト (669)
SOHOやフリーで本当に細々と食ってる奴の68人目 (233)
SEOのアイレップってどうなの？ (266)
XML使いのスレ 2.0 (955)
楽天市場むかつく人の数　→ (605)
--log9.info------------------
【三国志12】三國志12 Part46 【祝CS版発売】 (734)
無双の死に方 (681)
無双好きのための戦国BASARAアンチスレ・20 (694)
戦国BASARAシリーズ　アンチスレッド・65 (957)
初代太閤立志伝を語ろうぜ (257)
今更ながら太閤立志伝Ⅱスレ (741)
真・三國無双7 Part33 (1001)
AWW　「千年帝国の興亡」　PzKw Ⅵ (963)
真・三國無双6 Empires part69 (622)
無双OROCHI総合 346K.O.COUNT (560)
戦国武将多田野 (900)
貂蝉の桃色タイツについて　2足目 (711)
義経英雄伝修羅の女キャラは真面目だ (958)
【三国志7】三國志VII 12回目 (617)
信長の野望・天下創世スレッド49処断目withPUK (203)
戦国無双総合スレ第250討 (376)
--log55.com------------------
アベノミクスをミリオタが何となく応援するスレ
日本の核武装について考察するスレ 9発目
軍用拳銃を語るスレ ナバン62式拳銃
レーション（というか戦場での飯）メニューNo.48
韓国新型戦車K-2 Part106
信じられないが、本当だ!! Part168
海・航空・陸上戦考察スレ 軍事戦略・作戦・戦術 29
【ヘリ搭載】いずも型護衛艦150番艦【護衛艦】