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