TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼
webデザインの学習
■HPの平均寿命■
su-jineスレ
最近のＨＰは字が小さすぎるヾ(`д´ﾞ)ノ
Flash MX登場
はてなアンテナってうざくない？
ＨＰの作り方教えて下さい
1日7～99hitぐらいの人のスレ 12hit目
SOHOやフリーでそこそこ食えてる奴の1人目
マクロメディア☆STUDIO☆統合スレッド
Canvasについて語ろう
- 1 ：2011/05/11 ～ 最終レス ：2018/10/17
- 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.sc/test/read.cgi/hp/1295872957/
+ JavaScript の質問用スレッド vol.86 +
http://hibari.2ch.sc/test/read.cgi/hp/1303790568/
【誰か】jQueryのここがわからない【助けて】
http://hibari.2ch.sc/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
相変わらず変態すぎて困る
- 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とか使ってないっぽいんだけど
100～のスレッドの続きを読む
WEB制作の仕事依頼マッチング
(´･ω･`)知らんがな 1がな目
HTMLタグ大文字か小文字かアンケートスレ
ﾏﾀｰﾘ雑談スレ（女、同人、イラスト立入禁止）
デザインがｶｺｲｲサイトを紹介しあうスレ
【大事なのは】CMS総合スレ3【中身だろ！】
色々なHTML
まとめサイト運営してる人 Part3
+ JavaScript & jQuery 質問用スレッド vol.8 +
HTMLは狂っている
--------------------
J-girls◆五十嵐マリア◆はんなり
「鹿児島」大隅半島の高校野球part4
上越地方のラーメンPart10
【Youは何しにゲイバーへ】パク・ギュリ（元KARA）、龍仁の新型コロナ感染者と同じ日に梨泰院のクラブ訪問か？「本人確認中」[5/11] [新種のホケモン★]
没 落 国 家 日 本 の 象 徴 ネ ト ウ ヨ（笑） 2
コードギアス 復活のルルーシュ 雑談スレ★113
H22第Ⅱ回短答 得点率70％の集い
おまいら「生イクラ」の季節だぞ！！３
新・須磨学園男子陸上部応援スレ Part1
集団ストーカーは現代の魔女狩りです 出張版
戦国好きの歴女です。そこらの歴女よりは詳しいよ。
聖闘士星矢戦記
【3分】再販希望【以内に】
大洗女子風紀委員の園みどり子です
💛【アダルトビデオ】AV女優スレ、自分の好きなAV女優を言いなさい
【新型コロナ】国内の1日の感染者数、きょう25日は最多の76人に。24日の71人を上回る
エチオピアはまずい
【沖縄】水道水から有害物質検出 那覇・新都心で26・86ナノグラム 名護の100倍 2007年に調査 原因、米軍基地の可能性も
【魅せる】小島武夫の千里眼麻雀８【麻雀→Ｇ乳】
予備校迷っている
TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼