Canvasについて語ろう (329ﾚｽ)
上下前次1-新
1: 2011/05/11(水) 15:02:49.91 ID:uj4WuUJf(1)調 AAS
Canvasについて語りましょう
Canvas 2D API Specification 1.0
外部ﾘﾝｸ[html]:dev.w3.org
Canvas チュートリアル - MDC Docs
外部ﾘﾝｸ:developer.mozilla.org
203: 2012/07/06(金) 20:48:43.47 ID:??? AAS
ソースどうにか汁ｗｗｗｗ
//ifとか書いてるけどネストしてたりすると
どこのifかさっぱりわからないと思うわこれｗｗｗ
204: 2012/07/08(日) 12:50:25.78 ID:udMyyPfZ(1)調 AAS
ちなみにどこまで行った？
205: 2012/07/09(月) 07:16:34.46 ID:FuvFKy+C(1)調 AAS
ブロック崩しやっと終わった
stage25が鬼畜すぎるｗｗｗ
206: [age] 2012/08/05(日) 09:35:18.83 ID:??? AAS
新作まだぁ？
age
207: じゃ 2012/08/05(日) 12:18:23.04 ID:Y+KFicop(1)調 AAS
今>>187に魔神を追加してばっかでな〜んも作ってないぜ〜
208: じゃ 2012/08/15(水) 12:35:48.02 ID:zjEdFQZu(1)調 AAS
>>76を半年ぶりに見たら無駄な上に自分でも意味わかんなかったから
少ないコードでわかりやすく作り直したぜ〜
〜ブラウザだけで音を出す入門〜
外部ﾘﾝｸ[html]:www42.atwiki.jp
209: 2012/08/15(水) 12:42:57.51 ID:aImIa3Fi(1)調 AAS
相変わらず、糞コードだな。
210(1): 2012/09/11(火) 23:57:02.91 ID:??? AAS
外部ﾘﾝｸ:www.riaxdnp.jp
この解説が断片的でわからないんですよ。コピペしても動かない。
誰か動くサンプル書いてくれませんか。
211: 2012/09/14(金) 21:30:06.34 ID:0ZCdrfRy(1)調 AAS
>>210
さくっと見ただけだけど
複数の画像をよーいどんで読み込み→貼り付けってすると
読み込みの早い順になるから
画像読み込み→loadイベント→処理→次
ってやろうとしているんだと思う
で、キャッシュしているとloadが発火しないんじゃないかな
個人的には先に全部読み込み完了させておいてから処理するほうが好きだな
212: 2012/09/15(土) 22:21:29.30 ID:??? AAS
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
213: 2012/09/20(木) 01:06:48.78 ID:??? AAS
今流行のABC証明をcanvasで頼む
214: 2012/10/16(火) 12:55:03.45 ID:mVPlxbCr(1)調 AAS
ゲーム作ったぜ〜
外部ﾘﾝｸ[html]:www42.atwiki.jp
215: 2012/10/16(火) 13:27:46.72 ID:??? AAS
時間潰しアーマーワロタ
216: 2012/10/18(木) 19:11:48.40 ID:YuSwgUtq(1)調 AAS
ドラゴンタートル強ぇ
217: 2012/11/04(日) 10:49:00.13 ID:??? AAS
これ内部でレベルとかあがってんの？
レベルうｐ目的で全部の敵倒してみたがHP減るだけで倒し損か？
ソース見て解析しろってことですね
218: 2012/11/04(日) 17:55:16.65 ID:??? AAS
HTML見ればレベルアップとかないって書いてある
219: 2012/11/04(日) 22:27:46.70 ID:??? AAS
質問です。
canvasのWebページをキャプチャし新しいタブに表示するプログラムがあるのですが
さらに、キャプチャした画像の色を（例として赤を緑に、青を黄色になど）変換したいと
思っているのですが手がつかず困っています。
どなたか教えて頂けませんか？
220: 2012/11/04(日) 22:28:33.19 ID:??? AAS
//ページ全体をキャプチャ
(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(2): 2012/11/05(月) 14:19:12.03 ID:ki1QF9hM(1)調 AAS
スクショできるの知らんかったけどスクショして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: 2012/11/05(月) 21:14:59.99 ID:8AWmrkDb(1)調 AAS
寒天、いや寒転？
223: 2012/11/07(水) 12:40:48.65 ID:??? AAS
>>221
どうもありがとうございます。
ちょっと動作確認してきます。
本当にありがとうございます。
224: 2012/11/07(水) 13:04:49.93 ID:??? AAS
>>221
追記です。説明不足でした。
firefoxアドオンの開発のためにお聞きしました。
<overlay id="myOverlay"
xmlns="外部ﾘﾝｸ[xul]:www.mozilla.org"
xmlns:html="外部ﾘﾝｸ:www.w3.org">
<statusbar id="status-bar">
<scrollbox width="1" height="1">
<html:canvas id="myCanvas" display="none" />
</scrollbox>
</statusbar>
</overlay>
XULを使用しています。
ボタンを押すことで→キャプチャ＋色の変換→出力
を考えています。どうにかして上記プログラムと組み合わせ？
を行いたいのですができていません。
参考にさせていただきます。ありがとうございます。
225: [age] 2013/01/09(水) 23:10:37.40 ID:??? AAS
保守
226: 2013/01/10(木) 06:19:39.98 ID:rE/mitpA(1)調 AA×
したらばｽﾚ:study_3729
したらば板:study_3729
したらばｽﾚ:study_3729
外部ﾘﾝｸ[htm]:www2.tba.t-com.ne.jp
227: 2013/01/15(火) 14:41:52.88 ID:JWS69SWh(1)調 AAS
パワハラ犯罪にたいする刑事罰(※本投稿のコピペ歓迎です)
人事原則
１ 現行法では、社員が仕事を怠けたり、能力不足、就業規則違反、目標を達成できなくても解雇をしたり叱責することは違法です。どんな駄目社員、嘘つき社員、怠け者も定年まで解雇が違法なのが現行の正社員制度です。
２ パワハラは社風にあわない社員、成績の振るわない社員を自主退職に追い込む言わば人事的措置として用いられることが多い。
※違法な解雇の和解金相場は、労働審判で３ヶ月、通常裁判で１年以上の報酬、さらに社員が和解を拒めば復職が可能です。弁護士への着手金は12〜15万円＋20%の和解金、和解拒否なら20〜50万円程度。
人事部・ホットライン・御用組合へ直訴
メリット： 一時的緩和や人事異動
デメリット： 役員へ情報筒抜け、危険分子の烙印（情報漏洩がホットライン直訴者に多いのは人事部の常識）、パワハラ放置で自主退職に追い込まれる
民事訴訟・調停・労働審判
メリット： 損害賠償
デメリット： 裁判費用、解雇措置、民事不介入で刑事事案化を阻止、長期係争、パワハラ上司の継続雇用
刑事告訴
メリット： １パワハラ上司の解雇・懲戒、または２多額の和解金、１と２どちらでも被害者の雇用は維持
デメリット： 人事異動（出世コースから外れる）
◎録音は一方の当事者が取る限り合法です。※加害者に録音の同意を求める必要はありません。
◎告訴受理後の和解金は加害者の資産・収入に応じて変えてください。犯罪者の昨年の年収の半額程度×最大懲役年数が妥当です。
◎パワハラの被害についての告訴は１侮辱罪２脅迫罪３強要罪４威力業務妨害罪５傷害罪の順序で行ってください。警察・検察の協力（犯罪者の自宅・職場の強制捜査、留置所勾留）により罪の立証が楽になります。
◎刑事告訴した社員を解雇したり処遇面で著しい差別を行うことはないでしょうが、出世や管理職以上の昇進の可能性はあきらめるべきでしょう。
◎刑事告訴は民事訴訟と違って裁判による被害者への2次被害にありません。検察庁が被害者に代わって訴えをおこすので、無料で、時間と手間も告訴状をかくことと音声録音を残すだけです。
◎和解契約（公正証書・即決和解）では告訴した事実は秘匿事項となります。犯罪者が秘密保持契約を違反した場合の損害賠償金は、最低5000万円〜にしましょう。
228: 2013/02/04(月) 10:28:17.74 ID:UA1BFfVR(1)調 AAS
保守
229: 2013/03/06(水) 15:51:24.08 ID:0AOG3pFY(1)調 AAS
ボンバーマンもこれ使ってるの？
230: 2013/03/06(水) 19:10:31.53 ID:kMD4PmZG(1)調 AAS
これのことけ？
外部ﾘﾝｸ[html]:blog.happyelements.co.jp
231: 2013/03/06(水) 19:45:30.63 ID:??? AAS
これのこと
E2200っていう775世代のCPUでもかなり快適に動く
外部ﾘﾝｸ:japanese.engadget.com
232: 2013/03/06(水) 19:58:54.39 ID:??? AAS
ボンバーマンじゃないじゃん
233: 2013/05/21(火) 23:37:22.32 ID:??? AAS
whammy.jsというライブラリが面白い
canvasからwebm動画に変換できる
234(1): 2013/06/04(火) 03:17:16.08 ID:WqEOqPrp(1)調 AAS
新作だぜ〜
外部ﾘﾝｸ[html]:www42.atwiki.jp
235: 2013/06/09(日) 01:04:07.62 ID:??? AAS
>>234
すげーけど設定項目が多すぎ＆分かりにくくて頭がパンクしたｗ
あとやっぱ各ブラウザによる不安定さは何時までもネックやね
236: [age] 2013/06/12(水) 00:30:24.34 ID:??? AAS
！
237: [age] 2013/06/12(水) 00:34:59.39 ID:??? AAS
やばい・・
Uint8Array＋blob＋createObjectURLが優秀すぎる
base64encodeせずに音を出せたぜ
238(1): 2013/08/28(水) NY:AN:NY.AN ID:??? AAS
すみません。スレ違いだとは思いますがSVGについて教えてください。
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
239: 2013/08/28(水) NY:AN:NY.AN ID:??? AAS
>>238
スレチなので別の所で質問して下さい。
240(1): 2013/08/28(水) NY:AN:NY.AN ID:??? AAS
すみません。スレ違いだとは思いますがSVGについて教えてください。
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
241: 2013/08/29(木) NY:AN:NY.AN ID:??? AAS
>>240
【XML】SVGってどうなの2【DOM】
2chｽﾚ:hp
242: 2013/08/29(木) NY:AN:NY.AN ID:??? AAS
右クリックからリンク先の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: 2013/09/25(水) 06:52:21.79 ID:wjQYH4m7(1)調 AAS
新作だぜ〜
枠ツクール
外部ﾘﾝｸ:www53.atpages.jp
244: 2013/10/01(火) 03:58:30.33 ID:??? AAS
なるほど、相変わらずわからん
245(1): 2013/10/07(月) 02:21:41.44 ID:6JbeY9iE(1)調 AAS
新作だぜ〜
〜orbit trap探検隊〜
外部ﾘﾝｸ:www53.atpages.jp
スクショ
画像ﾘﾝｸ
一枚のHTMLからwebworkersを作って並列処理してるぜ〜
246: 2013/10/07(月) 13:11:22.53 ID:??? AAS
あげるならさjsdo.itだかなんかのカヤックが運営するあそこにあげてよ
247: 245 2013/10/08(火) 02:55:04.15 ID:BYxKYpip(1)調 AAS
見てきたけどwonderflみたく左側にコード出るのかよ
俺のだと嫌がらせになるぜ〜
248: 2013/10/12(土) 01:02:44.71 ID:??? AAS
コード管理大変そうなソースだな
改行とかあるあたりコンパイルしたってわけでもなさそうなのに
こんなコード書いてたら自分じゃ途中でわけわからなくなっちまうで
249: 2013/10/22(火) 17:55:13.81 ID:QaUFyOTp(1)調 AAS
なんせ一週間前に自分が作ったもんが解読できない時があるぜ〜
こんなん作ったわ
〜秋の味覚狩り〜
外部ﾘﾝｸ:www53.atpages.jp
250: 2013/10/23(水) 02:54:58.18 ID:??? AAS
↑
バリバリjavascript
ｗ
251: 2013/10/28(月) 19:56:53.96 ID:AKTpJBEP(1)調 AAS
jsdoitに何個かあげたけどさほど伸びなかったぜ！
アトラクタ
外部ﾘﾝｸ:jsdo.it
orbittrap
外部ﾘﾝｸ:jsdo.it
2dセルオートマトン
外部ﾘﾝｸ:jsdo.it
252: 2013/11/11(月) 13:30:52.86 ID:??? AAS
少しはソースコードがましになってるｗｗｗ
がやはり何をやってるのかさっぱりわからん
253: 2013/11/11(月) 21:07:54.50 ID:??? AAS
そのサイトで無改編のforkだけしてるやつなんなの
254: 2013/11/12(火) 10:39:47.28 ID:??? AAS
有用性のあるサイトが全くないよな。
え、これフラッシュじゃないの? というくらいのカッコいいサンプルサイトとかないのかな。
255: ２５１ 2013/11/23(土) 06:06:17.92 ID:KSATDeUj(1)調 AAS
みなさんのおかげでHotCodeに食い込みました
ありがとうございます＞＜
256: 2014/01/13(月) 20:29:49.69 ID:??? AAS
じゃがりきんって人は数学者かなにか？
何者なんだ・・
257: 2014/01/20(月) 12:35:06.31 ID:??? AAS
チョン大でユークリッド幾何教えてるって昔オフで言ってた
258: 2014/02/07(金) 22:01:42.13 ID:??? AAS
大きな画像をcanvasに読み込んで縮小表示するとすげージャギります。
解決策ないですかね？
<img>タグで読み込んだ画像を縮小表示するときは、アンチエイリアスが効いて綺麗に表示されるのに…。
259(1): 2014/02/08(土) 12:22:17.39 ID:??? AAS
等倍で読み込む→getImageData→自前縮小→put
260: 2014/02/08(土) 23:44:34.82 ID:??? AAS
>>259
レスありがとうございます。
canvasの drawImage() を使ってリサイズせずに、
別の方法で画像をリサイズしてからcanvasにはリサイズ後の画像を等倍で描画しろ、ってことですね。
自前でリサイズ処理を実装するのが難しそうだ…。
ブラウザのcanvas実装が進化して、綺麗にリサイズできるようになる日が来るのを待ちますw
261: 2014/02/09(日) 16:41:57.72 ID:??? AAS
drawImage()で縮小する方法として、
「いったん目的の画像と元画像の中間の大きさの画像を生成する」
っていう段階的にリサイズする手があるみたいですね。
ジャギー発生の条件が「画像の縮小率が 50% を下回る」ということらしいので、
段階的に縮小して50％を下回らないようにすればジャギらないようです。
Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する
外部ﾘﾝｸ:jsdo.it
262: 2014/02/11(火) 09:37:58.89 ID:4E0HsFuc(1)調 AAS
そもそも50%以下でジャギるって仕様はどうなってんだ
バイリニア（周囲４マスしか参照しない）か？
263: 2014/02/12(水) 15:51:06.92 ID:??? AAS
画像を円形にくり抜くのって出来ないの？
264: 2014/02/16(日) 13:26:34.72 ID:??? AAS
円形の画像ギャラリー
外部ﾘﾝｸ:jsdo.it
265(1): じゃがりきん 2014/03/15(土) 16:06:12.32 ID:61UnCATO(1)調 AAS
久々の自信作だぜ〜
ベルベットフレア
外部ﾘﾝｸ:jsdo.it
266: 2014/03/17(月) 18:29:00.18 ID:9eq4Z8up(1)調 AAS
>>265
ザックリしか見てないけど
function ruup()などの関数名がイカス
267: 2014/03/19(水) 22:16:35.80 ID:??? AAS
読めるソースになってるｗ
268: 2014/03/23(日) 15:46:24.23 ID:ykVxlW4K(1)調 AAS
詳しい方、おしえてください。当方、canvas初心者です。
canvasに４つの四角を描くプログラムを書いたのですが、
なぜか、４つめの枠線が薄くなります。
ソースコードを以下に上げたので、ご教示ください。m(_ _)m
外部ﾘﾝｸ:sandbox323.wiki.fc2.com
269(1): 2014/03/23(日) 19:27:33.78 ID:??? AAS
stroke()はrect()呼び出した後に毎回呼び出さず、最後に一回だけ呼び出せばいい
270: 2014/03/23(日) 20:12:22.08 ID:??? AAS
>>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: 2014/08/01(金) 21:21:33.37 ID:rp6Y6Wdn(1)調 AAS
Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた
外部ﾘﾝｸ:techracho.bpsinc.jp
272: [hage] 2014/11/13(木) 11:21:34.25 ID:??? AAS
外部ﾘﾝｸ:jsdo.it
じゃがりきん新作hage
273(1): 2015/02/17(火) 18:46:25.11 ID:??? AAS
幾何学の図形を描くのにCanvasは適していますか。
他にHTMLドキュメントで表現できる方法はありますか。
SVGのほうが最適でしょうか。
274(1): 2015/02/18(水) 02:18:21.48 ID:??? AAS
用途による
275(1): 2015/02/18(水) 09:35:34.76 ID:??? AAS
SVGのほうはHTMLと同じDOM操作で描くというより組み立てる感じに近い
fabric.jsってライブラリがcanvasとsvg両方に対応してる
276(1): 2015/02/18(水) 10:47:52.39 ID:??? AAS
SVGの最大の強みはスケーリング変えても画質の損失が無い事、
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事
canvasの場合全面書き換えする必要がある
あとSVGはIllustratorやInkscapeなどを使用して事前に作成(外部ファイル化)が可能
難点といえば複雑な図形では描画に少し時間がかかる点か？
しかしこれはcanvasも似たようなものか
どちらもjpegやpngなどラスター画像を組み込む事も出来るので全てを描画する必要は無い
277: 273 2015/02/18(水) 18:24:02.09 ID:??? AAS
>>274-276
教えてくださってどうも有難うございました。
たいへん参考になりました。
とりあえずinkscapeを使って描き、SVGで出力する方法でやってみます。
278(1): 2015/02/18(水) 18:39:27.09 ID:??? AAS
arcメソッドを使う場合はbeginPathもclosePathもいらないと思うんですが、使う理由は何ですか？
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです
279(1): 2015/02/18(水) 19:01:57.68 ID:??? AAS
>>278
ここのサンプル眺めてればなんとなく理由がわかると思う
外部ﾘﾝｸ:developer.mozilla.org
280: 2015/02/18(水) 19:04:55.07 ID:??? AAS
moveToでサブパスが発生するから
281: 2015/02/18(水) 20:40:00.31 ID:??? AAS
arcだけしか使わない場合ならmoveToは不要だと思うんですよ
282: 2015/02/18(水) 20:40:43.54 ID:??? AAS
>>279
注意: fill メソッドがと呼ばれるときはどんな開いている図形は自動的に閉じられ、 closePath メソッドを使う必要はありません。
なるほど
283: 2015/02/18(水) 20:41:55.38 ID:??? AAS
arcで複数の円を作る場合ならmoveToはいらないという話です
矩形やlineToなどを使う場合は別です
284: 2015/02/18(水) 20:52:23.53 ID:??? AAS
fillやstroke、closePathを呼び出すまでarcを複数回呼び出した場合、それは１つのパス、って事
285: 2015/02/18(水) 23:23:10.78 ID:??? AAS
真円ならいらないね
弧だけなら線と組み合わせる場合があるからいる
286: 2015/02/19(木) 09:17:47.89 ID:??? AAS
moveToが要る要らないじゃなくて、要るとき底辺コーダーが罠に嵌らないように、ご丁寧にそういうサンプルコードが書かれてるんだよ
で、そのサンプルが伝播して『ほとんどのサンプルコードには使われている』状態になってる
大元がどこかは分かるだろ
287: 2015/02/19(木) 09:28:11.26 ID:??? AAS
fill,stroke,closePathが不要なのはfillRect,strokeRect,clearRectだけだね
288: 2015/02/19(木) 10:03:16.78 ID:??? AAS
ベクターグラフィックシステムの設計の根底にタートルグラフィックの考え方があります
この辺も読んでおくとよいでしょう
外部ﾘﾝｸ[aspx]:msdn.microsoft.com
289(1): 2015/02/19(木) 12:25:47.01 ID:??? AAS
左○を白と黒のグラデーションにして、右○を赤と黒のグラデーションにしたいんですが
左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
外部ﾘﾝｸ:jsfiddle.net
どう直したらいいのか教えて下さい
290: 2015/02/19(木) 12:52:03.15 ID:??? AAS
>>289
上の方でちょっと話題になってるのと関連するけど、
beginPathが無いのとfillが1度だけしか呼ばれてないから１つの図形
と見なされてる
291: 2015/02/19(木) 13:06:35.12 ID:??? AAS
それと話題それるけどそのサイトいいね
ログインしなくても投稿できるのか
292: 2015/02/19(木) 13:20:56.56 ID:??? AAS
こうですか？左○のグラデーションが効くようになったんですけど右○は相変わらずグラデーションが効きません
あとパフォーマンスの観点からfillを一度だけ呼びたいんですけど無理なんでしょうか？
外部ﾘﾝｸ:jsfiddle.net
293: 2015/02/19(木) 13:31:35.57 ID:??? AAS
createRadialGradientの座標がどちらも一緒になってるよ
下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな？
あとfillでパスは閉じるのでclosePathは不要
294: 2015/02/19(木) 13:38:29.79 ID:??? AAS
あ、あと円グラデーションの終了点がかなり外側だから黒になり切らないね
100じゃなくて50じゃ？
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);
295: 2015/02/19(木) 14:01:04.90 ID:??? AAS
アドバイス受けて修正したら今度は右○は効くようになったのに左○が効かなくなりました
外部ﾘﾝｸ:jsfiddle.net
296: 2015/02/19(木) 14:11:46.21 ID:??? AAS
いやだからbeginPathは要るんだってばｗ
外部ﾘﾝｸ:jsfiddle.net
対照性が悪いみたいでスッキリしないと思うけど
297: 2015/02/19(木) 15:16:42.67 ID:??? AAS
なるほど、勉強になりました
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね
298(1): 2015/02/20(金) 17:44:11.41 ID:??? AAS
rotateで複数のグラフィックをそれぞれ中心で回転したい場合ってその数だけcanvas要素を作らないとだめですか？
外部ﾘﾝｸ[html]:tech.kayac.comの長方形が回転するサンプルのtranslate,rotate ,translateの後にfillRectを複数並べると
惑星が回るようになってしまいました
風車みたいなものをつくりたいんですが
外部ﾘﾝｸ:jsdo.itのサンプルではcanvas要素を複数用意してたのでやっぱり複数要素作らないだめですか？
299: 2015/02/20(金) 18:42:35.34 ID:??? AAS
よくわからん。
１つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん？
300: 2015/02/20(金) 19:09:15.65 ID:??? AAS
>>298
save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが
301: 2015/02/20(金) 22:59:29.39 ID:??? AAS
多分そんな感じで作ったんですが最初から作りなおしたらできました。
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます
302(1): 2015/02/20(金) 23:26:44.32 ID:??? AAS
translateで横に100ずらしたいのに、何故かxとyの分だけ余計にずれてます
外部ﾘﾝｸ:jsfiddle.net
座標10:10に100x100の正方形を描画して、右方向に100ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか？
303: 2015/02/20(金) 23:35:20.08 ID:??? AAS
>>302
いや、10ずつ足してるじゃん・・・
304: 2015/02/20(金) 23:44:36.73 ID:??? AAS
理解できました
translateで移動した位置が座標0:0となるんですね
305: 2015/02/21(土) 10:17:56.11 ID:??? AAS
transformって歴史的な理由で残されてるってw3cに書いてあったけどその歴史的な理由知ってる？
306: 2015/02/22(日) 20:23:32.30 ID:??? AAS
それを語るなら秦の始皇帝まで遡る事になるが良いかな？
307: 2015/02/22(日) 20:52:38.66 ID:??? AAS
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: 2015/02/24(火) 13:59:45.75 ID:??? AAS
cssにはskewが実装されてるのにcanvasには実装されてない
中途半端なのがtransformである
奥行きをつけるのにcssからなら楽勝だがcanvasでやると知識がないと無理
309: 2015/08/22(土) 23:08:36.53 ID:??? AAS
canvasを使ったお絵かきアプリのソースを捜しています。
書き出した絵を再度読み込める機能が必要です。
pngで書き出すだけなら次のようなものを見つけています。
Literally "Canvas"
外部ﾘﾝｸ[html]:literallycanvas.com
よろしくお願いします。
310(1): じゃがりきん 2015/11/09(月) 19:55:12.13 ID:jxiwh9if(1)調 AAS
新作どぇす
飛天
外部ﾘﾝｸ:jsdo.it
311: 2015/11/17(火) 05:16:50.87 ID:??? AA×
>>310
312: じゃがりきん 2015/11/17(火) 20:27:02.10 ID:t8dBkVyD(1)調 AAS
進化したぜ〜
魔天
外部ﾘﾝｸ:jsdo.it
313: 2015/12/21(月) 20:53:05.06 ID:tr4v3gJV(1)調 AAS
描かれたcanvasをSNSに簡単にアップできるようなライブラリなどはありますか？
canvas部分をクリック→ポップアップでtwなどのアイコンリスト→
選択→canvasを画像として投稿、のような感じにしたいです。
314(2): 2015/12/22(火) 19:58:01.39 ID:??? AAS
普通にcanvasを右クリで画像を保存してからアップしたほうがいんじゃね？
315: 2015/12/22(火) 23:52:30.35 ID:??? AAS
>>314
そのほうがいい理由がわからん。
316: 2015/12/23(水) 16:21:34.45 ID:??? AAS
>>314
313ですが、それを一連的に行いたいのです。
317: 2015/12/26(土) 08:38:40.26 ID:??? AAS
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: 2016/01/31(日) 12:22:12.78 ID:zfC0es6V(1)調 AAS
お世話になります。
私、責任者の加茂と申します。以後、宜しくお願い致します。
外部ﾘﾝｸ[html]:homepage2.nifty.com
外部ﾘﾝｸ[html]:homepage2.nifty.com
外部ﾘﾝｸ[html]:homepage2.nifty.com
外部ﾘﾝｸ[html]:homepage2.nifty.com
浪速建設様の見解と致しましては、メールによる対応に関しましては
受付しないということで、当初より返信を行っていないようで、今後につい
てもメールや書面での対応は致しかねるというお答えでした。
外部ﾘﾝｸ:www.o-naniwa.com
このように現在まで６通のメールを送られたとのことですが、結果一度も
返信がないとう状況になっています。
外部ﾘﾝｸ[html]:homepage2.nifty.com
外部ﾘﾝｸ[html]:homepage2.nifty.com
外部ﾘﾝｸ[html]:homepage2.nifty.com
私どものほうでも現在までのメール履歴は随時削除を致しております
ので実際に１１通のメールを頂戴しているか不明なところであります。
●クリスタル通り122号室の付きうごき引きニート，205号室の繰り返し症ニート
●浪速建設 女事務員 南野 東条 ●アパマンショップ八尾店 加茂正樹 でござる の巻
319: 2017/05/18(木) 10:53:32.65 ID:gdJaFD6Y(1)調 AAS
age
320: 2017/12/12(火) 05:21:20.26 ID:MrUcGD8N(1)調 AAS
ホームページで友達が稼げるようになった情報とか
⇒ 外部ﾘﾝｸ[html]:asaswq3wq.sblo.jp
興味がある人だけ見てください。
I0DIFOR3EF
321(2): 2018/01/27(土) 11:31:19.38 ID:??? AAS
【環境】
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(1): 2018/01/27(土) 12:43:48.47 ID:??? AAS
>>321
var contextが別のものであるかのように書いてるけど1つめのcontextは再宣言で亡くなってる
varじゃなくてlet/constで宣言してればちゃんとこれでちゃんとエラー吐いてくれるからvarをやめたほうがいい
323: 321 2018/02/28(水) 23:13:16.03 ID:??? AAS
>>322
ご指摘いただけて有り難いです。
imageはimage1とimage2に分けたのにcontextは重複させてしまっていました。
それからvarはブロックスコープを持たず、letやconstなら持つということも
知りました。新しい仕様なんでしょうか。
教えてくださってどうも有難う御座いました。
324: 2018/05/01(火) 18:50:10.89 ID:l1wYHpV1(1)調 AAS
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
HAVC1
325: 2018/10/17(水) 06:39:33.43 ID:2SQGKt6Z(1)調 AAS
商品をweb上でテキスト追加なんか編集できるライブラリってないかな？
多分Canvasだと思うんだがスキルなさすぎてわからん。
326(1): 2020/08/07(金) 13:28:50.10 ID:ESG7uJbW(1/2)調 AAS
画像アップロードツールの使い方がいまいち解りません
このコードどこに貼ったらいいですか？
↓
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: 2020/08/07(金) 14:32:25.46 ID:ESG7uJbW(2/2)調 AAS
>>326
解決しましたありがとうございました
328: 2023/03/01(水) 14:58:34.59 ID:??? AAS
心機一転頑張ります
329: 2023/09/04(月) 14:29:56.92 ID:??? AAS
いい加減にせいや、わしも疲れるわ。
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.859s*