◎正当な理由による書き込みの削除について： 生島英之とみられる方へ:
Canvasについて語ろう->画像>6枚
動画、画像抽出 ｜｜
この掲示板へ
類似スレ
掲示板一覧 人気スレ 動画人気順
このスレへの固定リンク： http://5chb.net/r/hp/1305093769/
ヒント：5chスレのurlに http://xxxx.5chb.net/xxxx のようにbを入れるだけでここでスレ保存、閲覧できます。
そして誰も語らないのであった
===========完===========
語るにしてもcanvasについてより描画アルゴリズムについてだろうね
FAQっぽいものを充実させてください
┌──┐
┌┴┐ ├┐
│ ├┬┘│
│┌┴┤ │
└┤ └┬┘
└──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか
今やってる勉強が終わったらサンプル載せてってやるから待ってろ
※デフォルトでは読み込んだ画像のデータをputImageData()できません
これさえなけりゃ気合いで何でもありにできるのにな
>7は普通に３次元空間では可能
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる
矩形や画像を2dで
>>7みたいに配置するのは無理じゃないの
こういうだまし絵の立体みたいに
一部を切断して繋がってるように見せかけるような方法くらいしか思いつかないけどそれはもうベツモノだし
と言ったものの
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか
そういやgetContextの引数2dしかみたことないけど3dとかあるのかすら
それぐらい日本語和訳みれば3dあるかどうかわかるだろ・・・
w3cが言ってたwebGLの致命的な欠陥ってどうなったんだ？
なんとかしてくんなきゃ手が出せないぜ
(x1,y1) (x2,y2) (x3,y3) (x4,y4)の各四点に四隅が一致した画像ファイルを貼付けるにはどうすればいいでしょうか。
対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか？
そのうちフォトショとかシーケンサの代わりになるサイトが出るな
<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>
赤い円の中を四角で切り抜いて
切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
あと下の緑の四角と水色の四角も切り抜いた赤い円の内側から見えるようにしたいです
＞切り抜いた赤い円の内側（円の中心方向）にも影を付けるにはどうすればいいですか？
これがどういう意味かよくわかんなからそれ以外の部分だけ
http://ideone.com/AZtYY >>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>
切り抜き部分の透過はsave()、restore()使えばひとつのcanvasでできそうだけど無理かな
>>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();
rect()が時計回りに定義されてるから、円弧を反時計回りにして
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);
とシンプルにもできる
clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか？
>>30-31 イメージ通りの結果です！ありがとうございますm(_ _)m
> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしに
>>30のほうをtrueに、
>>31のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これ理解できました
本当にどうもありがとうございます
canvasで文字列を画像として出すのってどーやんの？
https://developer.mozilla.org/ja/Canvas_tutorial/Using_images#section_7 > 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか？
コードが短くなるというだけで速度とかは逆に遅くなる？
canvasの例文wikiみたいなのやれば儲かるよ今ならね
MDCでおｋ
html5.jpでおｋ
ってのが世間の風潮
そこらは例文というか解説
俺もやろうか考えたけど面倒くさいからやってない
ブログでゲームの作り方の解説はしたが
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね
canvasでsvg女子みたいに人体描画しようとした奴いる？
x,y,zを渡すと直方体を描画する関数を作成しなさい。
＼ ヽ ! | /
＼ ヽ ヽ / / ／
お断りだああああああああああぁぁぁ！！
＼ ｜ / ／
,ｲ
￣ -- = ＿ / | --'''''''
,,, ,r‐､λノ ﾞi､_,､ﾉゝ - ￣
ﾞl ﾞ､_
.j´ . .ﾊ_, ,_ﾊ （.
─ ＿ ─ { (ﾟωﾟ ） /─ ＿ ─
). c/ ,つ ,l~
´y ｛ ,、 ｛ <
ゝ lﾉ ヽ,) ,
>47
それはどのレベルまでやるんだ？
簡易設計図みたいに遠近法もなしの線だけでできた直方体か？
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる
直方体っぽくなればどんなのでもよしとします。
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。
Canvasって数値配列に直接対応するフレームバッファを持っていたりするから、レンダリングは全部ソフトウエアでやるんですよね？
CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・
やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか？
>>52 大きい面積を塗りつぶすなどする場合はかなり遅くなると思います。
IE9だとFirefox5とかに比べて速いのでハードウェアアクセラレーションが効いているのかもしれません。
>55
おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)ｲｲ
それをやると無理やり変化させてるのがモロバレなんだぜ
putImageData使えば、グラフィックソフト張りにいろいろできるじゃん、て思って実験してみました
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト
結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定
・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます
正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです
JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー
ふむ
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生
みんな似たようなこと考えてんな
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ
いろいろ調べてた所、大きな数の添字アクセスって高コストなんですね
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました
置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね
そのあたりをうまくやれば改善できるかもです
IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、；
webGLに欠陥が見つかったとき、IEが対応させてもねーのに懸念を表明した時は何様だと思った
質問です
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。
自己解決しました
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);
...つづく
つづき
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....
訂正
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。
>>37 >>38 過去ログから順番に見てたが爆笑したｗ
>>72 よく出来てるんだけど
ルールがいまいちわからん
すげー！
と思ってコード見たら読みづれぇぇ！
これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる？
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を紹介しているサイトでは綺麗にピクセル単位で指定できると書いてあったので戸惑っています。
>>78 面倒くさいから
そのままコピペして動けるものを一式張って
ありがとございます。
http://ailinksh.kojyuro.com/minigame3/hosizoraTest.html 私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。
>>80 きめえコードだな
俺様が手直してしてやるからまってろ
がーん、きめえ。
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。
>83
あのページ開けませんけど？
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。
>>77 あってるぜ
waveヘッダー（コピペ）に配列くっつけてbase64エンコード（コピペ）して
dataスキームでaudioのsrcにぶっこんで鳴らしてるぜ
画像を読み込んでCanvasに表示させると
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様？
>>85 今すぐどうこうじゃないけど
そのうち音鳴らすことがあった時
パクっていい？
>>88 出来たらgithubにあげて有名人になってください
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 相変わらず変態すぎて困る
var image = document.createElement('img');
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る？
保存させるときに名前付いてないのが困る
cgiに画像名とdataURLを投げてファイル化して
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼
>>90 putImageDataで透過出来てるってどういうことなの・・・
ちょっと違うけど簡単に書くとこうだぜ！
1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput
1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ！
concat()で.dataの高速複製ができたらいいんだけどな
ピクセル単位で合成してたんだな
いつも
buffer = createElement('canvas');
g = this.buffer.getContext('2d');
g.fillRect(0,0,10,10);
ctx.drawImage(buffer,0,0,10,10,0,0);
てやって合成してたからputImageData使うなら軽く出来そう
長文スンマソン
たぶん大量に透過させない限りcanvasの機能使ったほうが早いぜ〜
canvasマリオがレベル高過ぎて吹いたぜー
ってかあれどうなってんの？？
setTimeoutとか使ってないっぽいんだけど
自己解決しますた。。普通にinterval使ってました
HTML5のCanvasの勉強にペイントのようなものを作っているのですが、
lineWidthを太くすると、
http://f.hatena.ne.jp/ogatashi/20110605130608 このような線になってしまいます。
これは何が原因で、どのように対策すればいいのでしょうか?
http://ascii.jp/elem/000/000/513/513377/index-4.html を参考に作っています。
その都度begin()stroke()begin()stroke()ってやってる？
mousemoveにイベントハンドラを設定し、
beginPath
moveTo
lineTo
stroke
closePath
の処理を繰り返しております。
素早くマウスを動かすとスムースな線が引かれ、ゆっくり動かすとリンク先のようになるため
mousemoveイベントが1px毎に発生し、1pxの太い幅が引かれそのようにトゲトゲのような
ものになっているのかと思います。
じゃ前回の位置からの距離はかって
最低いくつなら線引くってやればいんじゃね
距離=Math.pow((前回X-今X)*(前回X-今X)+(前回Y-今Y)*(前回Y-今y),0.5)
>>105 ありがとうございます
私もそれを考えてみたのですが、
その最低の距離を大きくすると、小さな角を持った線が引けなくなり、
小さくすると、少し太くなるものの同じような状態になります。
また、大きくした状態でも、いろいろな角度に移動させると同じような状態になります。
隙間が開くのは当たり前なんだが。
目で見て納得できるようにjsをこうしてみ。
http://ideone.com/li1ot あとな、原因を追求するときはちゃんとログを取るように。
〜かと思います、で済ませるなよ。
対策は、自分で四辺形を描くしかない。
rectで書いたら角が円にならずにカクカクにならない?
線引くたびにclosePathしてんだから、どっちにしろ角は丸くならねえよ
mousedown時にbeginPath(), moveTo()
mouseup時にclosePath()すればいい
>>109 ありがとうございます
そのように書いてみたのですが、mouseupしたときに引かれる線は以前と同じでした。
>>102 曲がり角に太さを直径とする円を描画すればなめらかになるぜ
<hed>になってるけど
ちゃんとピンボールになっててワロタ
物理屋7日？
すごいな
もはやわけわからんくて手がつかれた
462万点
5000行とか読む気も失せるわｗｗｗｗ
>>114 うはｗ今までまっったく気づかなかったぜ！
直したぜ
Canvasの上でマウスをクリックしたら、クリックした位置に点を表示させたいのですが、
クリックされた座標で点を表示すると、マウスカーソルの右下に点が表示されます。
これをマウスアイコンの左上か、中心にするにはどうすればいいでしょうか?
座標をずらせばいいことまでは考えついたのですが、なにか方法があるのでしょうか?
マウスカーソルのサイズ取得の方法などはあるのでしょうか?
すみません記載漏れがありました。
もう一点ご質問なのですが、クリックすると点が表示されるのですが、クリックしたままドラッグをすると、カーソルアイコンがテキスト選択のアイコンになってしまいます。
cssのcursor以外にドラッグ中のアイコンを指定する方法などあるのでしょうか?
独自カーソルを設定しても、ドラッグ中はテキスト選択アイコンになってしまいます。
通常はマウス座標をとると矢印のさきっちょの座標が返ってきます。
おそらく描画する時にcanvasのtopとleft分を足していないのでしょう。
満喫のハイスペックPCでcanvas二枚重ねにしたらputImageDataでもなんか透過できたわ
HTMLの画像化はサーバサイドかブラウザの拡張機能権限じゃないと無理ですか
無理だね。
DOMをCanvas内に描けるようにしようって提案もちらっと聞いたことあるけど、
もしそれができるようになったとしても、同一生成元とかの関係でピクセル取り出せるようになるのは望み薄かも。
なんでダメなんだろ
セキュリティー？
それが出来たらどのブラウザでも文字のラスターがとれるのに
toDataURLしてどっかに送信することでプライバシを容易く侵害出来るからだろ
意図しない外部のスクリプトが読み込まれてるのなら画像化しなくても侵害されるんでないの
パスワードとか入力欄だけ初期状態でキャプチャすればいいような
自分のサイトの画面をキャプチャして何が問題なのかわからない
問題と思われるのは訪問済みかどうかの状態、フォームへの入力内容、greasemonkey等での変更、くらい？
訪問済みとフォームへの入力はキャプチャ実行時にブラウザ側で初期状態にすればいいし
greasemonkey等でのDOM等の操作はキャプチャしなくても取得できるし・・・
ここで言ったところでどうにもならないけど
どっかページ開く→ローカルにある画像かたっぱしっから読み込み→スクショ→どっか送信
そういう状況じゃ使えなくしたらいいじゃん
webGL問題もそうして解決したんでしょ
さすがに今回のGoogleさんのロゴはIE8には対応できなかったみたいだな
まぁめんどくさくてしなかっただけかもしれないけど
パーリンノイズ習得したら炎描画がすごいことになったぜ〜
数学スキル高すぎるな
中学レベルで止まってるからわけわからーん／(^o^)＼
マンデルブロー集合をズームしていくやつとか作れたらかっこいいよね
今マンデルブロ集合をつけたとこだぜ〜
１フレーム0.1秒ぐらいだから動画もやろうと思えばできるぜ〜
錯覚線となってるところは
モアレ（干渉縞）と言うぞ
>>141 そんな簡単にやってのけちゃうなんてまじかっけー
色までついてるし感動した
うは〜
ブッダブロもできたぜ〜
>>143 サンクス！直したぜ〜
なんでそんな色々知ってんのｗｗｗｗｗ
文系だから用語すら聞き覚えないのばっかりだな
CG技術に応用されてる。フラクタルとかカオス数学のいろいろ。
googleがなんか2Dの物理エンジン出してなかったっけ?
あれ使えばできんじゃね?
JavaScriptで実装とかやったら流石にクッソ重くなるんじゃないだろうか
リアプノフフラクタルをつけたぜ〜
>>153 これこれ
どうやってるかわかんないぜ！
動けばいいだけの汚らしいコードに見えて
かなり最適化されてるんだね
それとできるやつは変数関数名なんてとこはこだわらないんだなｗ
>>156 そういう奴もいるだけで、必要条件でも十分条件でもない
クリフォードアトラクタもつけたぜ
もし使う時は理屈だけ見て自分で使いやすいように1からコード書いてねー
1ドット毎に違う色を指定して描画する最速の方法はどうすればいいの？
要するにブラウザが対応していない画像リーダーを作ってみたが、描画がめちゃ遅いんで。
色の指定に¨rgba(22,33,44,1)¨みたいな文字列を指定してたら、そりゃ遅いよな｡｡。
>>162 うぉお！こんなんあったのか。超速くなったありがとう！
これからはちゃんとw3のページも確認するよ。
canvasって画像加工できますか？
全体の色を黒くしたり白っぽくしたり
ピクセルのrgb値を反転させたり変えて他の色調にしたり
ぼかしたりモザイクにしたりなど
さすがにバイナリレベルまでいじるのはきついので
何かAPIがあるといいのですが
なんかそういうAPIありませんでしょうか？
適当にいじってたらオリジナルのアトラクタができたぜ〜
漸化式
パラメーターを複素数A,複素数B, 共役を~として
C=(A~-Zn~)×(Zn~-B~)
Z(n+1)=(C+Zn)÷(C+B)
コード
パラメーターをa,b,c,dとして
e=(a-x0) f=(y0-b) g=(x0-c) h=(d-y0)
i=e*g-f*h j=e*h+f*g
k=i+x0 l=j+y0 m=i+c n=j+d
x1=(k*m+l*n)/(m*m+n*n) y1=(l-n*x1)/m
a=2.3 b=-0.4 c=4.5 d=2.75 の時の画像
a=0.4 b=-1.91 c=-2.9 d=-4
1.38, -0.8, -2.6, -1.3
>>168 たぶんバイナリでいじったほうが楽だぜ
ただローカルから読んだ画像はいじれないから
ブラウザの設定を変えれ
おいおい、ここがcanvasの総合スレかよ…
part5くらい行ってるんだろうな、と思ったら全然書き込みが無いのな。
canvasを使っている人って少数派なのか？
別段書くことないしな
質問するにしても数えるほどしかメソッドないしググって終了
canvasは意外に敷居が高くて無理ポ
というより
>>173の人見ればわかるけど
描画処理は文系理系の差が出る分野だからな
自由自在にできる
>>173の中の人が羨ましいわ
でも本当に使える人間ってのは数学まっったくできないのにフォトショで面白いことができる人なんだぜ〜
131にスーパーバラ曲線をつけたぜ
これはマジですごいぜ
透過・合成のところが参考になりました
そのまま真似してもよろしいでしょうか？
>>179 いいぜ
でもまだ高速化できるからあれ見て自分で考えるといいぜ〜
10000行超えてるんですがｗｗｗｗｗｗｗｗ
すげえな
もうライブラリ化しちゃえばいいのに
オブジェクトを一つ作ってネームスペースの代わりにして、そこに全部突っ込むんだ。
とりあえずは、それでおk
Canvas敷居高いって本気かよ
ペラ紙１枚に収まる程度の貧弱APIなのに……
APIの少なさは敷居と関係ないのでは？
JSだってselectに数字並べて表示させるのと
アニメーション実装でグラフィカルで動的なコンテンツ作成じゃ
敷居の度合いが違うでしょう
canvasに線1本ひいて俺canvasできるんだぜとかは誰も言わない
>>187はすごいな
古いPCからスタートおしたら死にそうになったけど
一番右下からタヌキ ライオン フクロウに見えないでもない
でかいのはpngをbase64_encodeしてスクリプトに組み込んでるからだ
画像部分を消したら664kbから20kbになったぞｗ
でもまぁクロージャーコンパイラー使ってるとはいえ
20kbでこれとはすごいな
こういう作品が出れば出るほどcanvasの敷居が高く感じられる
カラパイアで紹介されてたの見た。作者は何者なんだ？
ソースどうにか汁ｗｗｗｗ
//ifとか書いてるけどネストしてたりすると
どこのifかさっぱりわからないと思うわこれｗｗｗ
ブロック崩しやっと終わった
stage25が鬼畜すぎるｗｗｗ
今
>>187に魔神を追加してばっかでな〜んも作ってないぜ〜
http://www.riaxdnp.jp/?p=1570 この解説が断片的でわからないんですよ。コピペしても動かない。
誰か動くサンプル書いてくれませんか。
>>210 さくっと見ただけだけど
複数の画像をよーいどんで読み込み→貼り付けってすると
読み込みの早い順になるから
画像読み込み→loadイベント→処理→次
ってやろうとしているんだと思う
で、キャッシュしているとloadが発火しないんじゃないかな
個人的には先に全部読み込み完了させておいてから処理するほうが好きだな
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
これ内部でレベルとかあがってんの？
レベルうｐ目的で全部の敵倒してみたがHP減るだけで倒し損か？
ソース見て解析しろってことですね
質問です。
canvasのWebページをキャプチャし新しいタブに表示するプログラムがあるのですが
さらに、キャプチャした画像の色を（例として赤を緑に、青を黄色になど）変換したいと
思っているのですが手がつかず困っています。
どなたか教えて頂けませんか？
//ページ全体をキャプチャ
(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(関係あるかどうか)など調べていますがわかっていません。
よろしくお願いします。
スレチだったらすみません
スクショできるの知らんかったけどスクショして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ってとこでダブルクリック
>>221 どうもありがとうございます。
ちょっと動作確認してきます。
本当にありがとうございます。
>>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を使用しています。
ボタンを押すことで→キャプチャ＋色の変換→出力
を考えています。どうにかして上記プログラムと組み合わせ？
を行いたいのですができていません。
参考にさせていただきます。ありがとうございます。
★★★チベットの独立は日本の核心的利益である★★★
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
￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥ パワハラ犯罪にたいする刑事罰(※本投稿のコピペ歓迎です)
人事原則
１ 現行法では、社員が仕事を怠けたり、能力不足、就業規則違反、目標を達成できなくても解雇をしたり叱責することは違法です。どんな駄目社員、嘘つき社員、怠け者も定年まで解雇が違法なのが現行の正社員制度です。
２ パワハラは社風にあわない社員、成績の振るわない社員を自主退職に追い込む言わば人事的措置として用いられることが多い。
※違法な解雇の和解金相場は、労働審判で３ヶ月、通常裁判で１年以上の報酬、さらに社員が和解を拒めば復職が可能です。弁護士への着手金は12〜15万円＋20%の和解金、和解拒否なら20〜50万円程度。
人事部・ホットライン・御用組合へ直訴
メリット： 一時的緩和や人事異動
デメリット： 役員へ情報筒抜け、危険分子の烙印（情報漏洩がホットライン直訴者に多いのは人事部の常識）、パワハラ放置で自主退職に追い込まれる
民事訴訟・調停・労働審判
メリット： 損害賠償
デメリット： 裁判費用、解雇措置、民事不介入で刑事事案化を阻止、長期係争、パワハラ上司の継続雇用
刑事告訴
メリット： １パワハラ上司の解雇・懲戒、または２多額の和解金、１と２どちらでも被害者の雇用は維持
デメリット： 人事異動（出世コースから外れる）
◎録音は一方の当事者が取る限り合法です。※加害者に録音の同意を求める必要はありません。
◎告訴受理後の和解金は加害者の資産・収入に応じて変えてください。犯罪者の昨年の年収の半額程度×最大懲役年数が妥当です。
◎パワハラの被害についての告訴は１侮辱罪２脅迫罪３強要罪４威力業務妨害罪５傷害罪の順序で行ってください。警察・検察の協力（犯罪者の自宅・職場の強制捜査、留置所勾留）により罪の立証が楽になります。
◎刑事告訴した社員を解雇したり処遇面で著しい差別を行うことはないでしょうが、出世や管理職以上の昇進の可能性はあきらめるべきでしょう。
◎刑事告訴は民事訴訟と違って裁判による被害者への2次被害にありません。検察庁が被害者に代わって訴えをおこすので、無料で、時間と手間も告訴状をかくことと音声録音を残すだけです。
◎和解契約（公正証書・即決和解）では告訴した事実は秘匿事項となります。犯罪者が秘密保持契約を違反した場合の損害賠償金は、最低5000万円〜にしましょう。
whammy.jsというライブラリが面白い
canvasからwebm動画に変換できる
>>234 すげーけど設定項目が多すぎ＆分かりにくくて頭がパンクしたｗ
あとやっぱ各ブラウザによる不安定さは何時までもネックやね
やばい・・
Uint8Array＋blob＋createObjectURLが優秀すぎる
base64encodeせずに音を出せたぜ
すみません。スレ違いだとは思いますがSVGについて教えてください。
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
すみません。スレ違いだとは思いますがSVGについて教えてください。
フチ付きの二つの図形を結合させたいのですがHTML5のSVGで可能でしょうか?
可能でしたら解説サイトなど教えていただけないでしょうか?
右クリックからリンク先の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
});
新作だぜ〜
〜orbit trap探検隊〜
http://www53.atpages.jp/jagarikin/orb スクショ
一枚のHTMLからwebworkersを作って並列処理してるぜ〜
あげるならさjsdo.itだかなんかのカヤックが運営するあそこにあげてよ
見てきたけどwonderflみたく左側にコード出るのかよ
俺のだと嫌がらせになるぜ〜
コード管理大変そうなソースだな
改行とかあるあたりコンパイルしたってわけでもなさそうなのに
こんなコード書いてたら自分じゃ途中でわけわからなくなっちまうで
少しはソースコードがましになってるｗｗｗ
がやはり何をやってるのかさっぱりわからん
そのサイトで無改編のforkだけしてるやつなんなの
有用性のあるサイトが全くないよな。
え、これフラッシュじゃないの? というくらいのカッコいいサンプルサイトとかないのかな。
みなさんのおかげでHotCodeに食い込みました
ありがとうございます＞＜
じゃがりきんって人は数学者かなにか？
何者なんだ・・
チョン大でユークリッド幾何教えてるって昔オフで言ってた
大きな画像をcanvasに読み込んで縮小表示するとすげージャギります。
解決策ないですかね？
<img>タグで読み込んだ画像を縮小表示するときは、アンチエイリアスが効いて綺麗に表示されるのに…。
等倍で読み込む→getImageData→自前縮小→put
>>259 レスありがとうございます。
canvasの drawImage() を使ってリサイズせずに、
別の方法で画像をリサイズしてからcanvasにはリサイズ後の画像を等倍で描画しろ、ってことですね。
自前でリサイズ処理を実装するのが難しそうだ…。
ブラウザのcanvas実装が進化して、綺麗にリサイズできるようになる日が来るのを待ちますw
drawImage()で縮小する方法として、
「いったん目的の画像と元画像の中間の大きさの画像を生成する」
っていう段階的にリサイズする手があるみたいですね。
ジャギー発生の条件が「画像の縮小率が 50% を下回る」ということらしいので、
段階的に縮小して50％を下回らないようにすればジャギらないようです。
Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する
http://jsdo.it/21f/nvIM そもそも50%以下でジャギるって仕様はどうなってんだ
バイリニア（周囲４マスしか参照しない）か？
>>265 ザックリしか見てないけど
function ruup()などの関数名がイカス
詳しい方、おしえてください。当方、canvas初心者です。
canvasに４つの四角を描くプログラムを書いたのですが、
なぜか、４つめの枠線が薄くなります。
ソースコードを以下に上げたので、ご教示ください。m(_ _)m
http://sandbox323.wiki.fc2.com/wiki/canvas-test stroke()はrect()呼び出した後に毎回呼び出さず、最後に一回だけ呼び出せばいい
>>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最新版）がおかしいんでしょうか？
幾何学の図形を描くのにCanvasは適していますか。
他にHTMLドキュメントで表現できる方法はありますか。
SVGのほうが最適でしょうか。
SVGのほうはHTMLと同じDOM操作で描くというより組み立てる感じに近い
fabric.jsってライブラリがcanvasとsvg両方に対応してる
SVGの最大の強みはスケーリング変えても画質の損失が無い事、
画像の要素の一部を移動や拡大とかだとその属性の変更で済んでしまう事
canvasの場合全面書き換えする必要がある
あとSVGはIllustratorやInkscapeなどを使用して事前に作成(外部ファイル化)が可能
難点といえば複雑な図形では描画に少し時間がかかる点か？
しかしこれはcanvasも似たようなものか
どちらもjpegやpngなどラスター画像を組み込む事も出来るので全てを描画する必要は無い
>>274-276 教えてくださってどうも有難うございました。
たいへん参考になりました。
とりあえずinkscapeを使って描き、SVGで出力する方法でやってみます。
arcメソッドを使う場合はbeginPathもclosePathもいらないと思うんですが、使う理由は何ですか？
arcメソッドってパス関係ないと思うんですけど。
ほとんどのサンプルコードには使われているんですがこれらは間違っていると思うんです
arcだけしか使わない場合ならmoveToは不要だと思うんですよ
>>279 注意: fill メソッドがと呼ばれるときはどんな開いている図形は自動的に閉じられ、 closePath メソッドを使う必要はありません。
なるほど
arcで複数の円を作る場合ならmoveToはいらないという話です
矩形やlineToなどを使う場合は別です
fillやstroke、closePathを呼び出すまでarcを複数回呼び出した場合、それは１つのパス、って事
真円ならいらないね
弧だけなら線と組み合わせる場合があるからいる
moveToが要る要らないじゃなくて、要るとき底辺コーダーが罠に嵌らないように、ご丁寧にそういうサンプルコードが書かれてるんだよ
で、そのサンプルが伝播して『ほとんどのサンプルコードには使われている』状態になってる
大元がどこかは分かるだろ
fill,stroke,closePathが不要なのはfillRect,strokeRect,clearRectだけだね
ベクターグラフィックシステムの設計の根底にタートルグラフィックの考え方があります
この辺も読んでおくとよいでしょう
https://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx
左○を白と黒のグラデーションにして、右○を赤と黒のグラデーションにしたいんですが
左○が赤と黒になってしまいまして、右○のグラデーションが効いてない状態になりました
http://jsfiddle.net/cq2nLqhy/ どう直したらいいのか教えて下さい
>>289 上の方でちょっと話題になってるのと関連するけど、
beginPathが無いのとfillが1度だけしか呼ばれてないから１つの図形
と見なされてる
それと話題それるけどそのサイトいいね
ログインしなくても投稿できるのか
こうですか？左○のグラデーションが効くようになったんですけど右○は相変わらずグラデーションが効きません
あとパフォーマンスの観点からfillを一度だけ呼びたいんですけど無理なんでしょうか？
http://jsfiddle.net/cq2nLqhy/3/ createRadialGradientの座標がどちらも一緒になってるよ
下は
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 100);
かな？
あとfillでパスは閉じるのでclosePathは不要
あ、あと円グラデーションの終了点がかなり外側だから黒になり切らないね
100じゃなくて50じゃ？
var crg2 = ctx.createRadialGradient(150, 50, 10, 150, 50, 50);
アドバイス受けて修正したら今度は右○は効くようになったのに左○が効かなくなりました
http://jsfiddle.net/cq2nLqhy/4/ いやだからbeginPathは要るんだってばｗ
http://jsfiddle.net/gLbd0frh/1/ 対照性が悪いみたいでスッキリしないと思うけど
なるほど、勉強になりました
グラデーションをつかうと一つずつ描画しないといけないのが難点ですね
rotateで複数のグラフィックをそれぞれ中心で回転したい場合ってその数だけcanvas要素を作らないとだめですか？
http://tech.kayac.com/archive/canvas-tutorial.htmlの長方形が回転するサンプルのtranslate,rotate ,translateの後にfillRectを複数並べると
惑星が回るようになってしまいました
風車みたいなものをつくりたいんですが
http://jsdo.it/shitman/sDTZのサンプルではcanvas要素を複数用意してたのでやっぱり複数要素作らないだめですか？
よくわからん。
１つのオブジェクトのパスを指定して変換かけて描画する。
の繰り返しでいいだけじゃん？
>>298 save()
translate() rotate() translate()
fillRect()
restore()
translate() rotate() translate()
fillRect()
restore()
以下繰り返し
でしょ
当然rotateや2回目のtranslateの中身は変えないと全部重なるだけだが
多分そんな感じで作ったんですが最初から作りなおしたらできました。
なんで最初のが動かなかったのか原因は分かりません。
ありがとうございます
translateで横に100ずらしたいのに、何故かxとyの分だけ余計にずれてます
http://jsfiddle.net/0fs1dhfj/ 座標10:10に100x100の正方形を描画して、右方向に100ずらした位置に正方形を描画したいんですが
これ、正方形と正方形の間にスペースが空いてしまいます。
どうしてこうなるんでしょうか？
理解できました
translateで移動した位置が座標0:0となるんですね
transformって歴史的な理由で残されてるってw3cに書いてあったけどその歴史的な理由知ってる？
それを語るなら秦の始皇帝まで遡る事になるが良いかな？
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メソッドをそれぞれ呼んだほうが扱いやすい気がする
cssにはskewが実装されてるのにcanvasには実装されてない
中途半端なのがtransformである
奥行きをつけるのにcssからなら楽勝だがcanvasでやると知識がないと無理
canvasを使ったお絵かきアプリのソースを捜しています。
書き出した絵を再度読み込める機能が必要です。
pngで書き出すだけなら次のようなものを見つけています。
Literally "Canvas"
http://literallycanvas.com/index.html よろしくお願いします。
>>310
:::::::::::::::::::: ::::::::::／ ）:::::::::
:::::（＼::::::: ／ ／ ):::::::::::
:::::/＼＼ ／ ／ ／ヽ::::::::::::
:::: ヽ ＼＼ ｨユ, ／ ／ ／ ／::::::::::::::::
:::: （ ＼ ＼＼ （ ＾ω＾） ｌ 三 ／ ／ ）:::::::::::::::
:::::::ヽ ヽ . ミヽヽ | | / 二 ／ ／
::::::: ( ＼ ヽミ ヽヽ | .| + / 二 ___／ヽ
::::... /ヽ ヽ ﾆ ヽヽ |,,,| ┼ ／／ ニ _______／
:::. ヽ____ ﾆ ヽ｀ｌ ヽ__／／ ニ ____ノ
ヽ___, ﾆ ｌ :: ′ ニ ___ノ
ヽﾆ -‐ ,ｌ :: __ ≡ __ノ+ ┼ ＊ :::::::::
ヽ---'''ヽ､ ,,,;''''＝'''''＿＿ + ┼ + .::::::::::
:::::... + ┼ + ＥＥi''!Q.Qー-､___'''''ー-､ :....::::::::::::
:::::::.... + ┼ ＥＥi. Q. Q +'''ヽ ..:...::::::::::::::::::::
:::::::::::::::::..... + ＥＥi. Q. Q ┼ :....:::::::::::::::::
::::::::::::::::::::....: + ＊ EＥi Q Q .....:::::::::::::::::
::::::::::::::::::::::::::... + EE! Q ＠.....:::::::
::::::::::::::::::....::....::. ｶカ ＠...::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::
私は不死鳥ハメ鳥。何度dat落ちしても蘇る。
世界中にあふれるさまざまなハメ撮り動画・画像を知っている。
でもただひとりの不幸な男が欄検眼段にHITしてしまい、
その男と一緒に滅びていった女達のことを私は忘れない。
私の名は不死鳥ハメ鳥、ラーミアの末裔。 描かれたcanvasをSNSに簡単にアップできるようなライブラリなどはありますか？
canvas部分をクリック→ポップアップでtwなどのアイコンリスト→
選択→canvasを画像として投稿、のような感じにしたいです。
普通にcanvasを右クリで画像を保存してからアップしたほうがいんじゃね？
>>314 313ですが、それを一連的に行いたいのです。
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程度のぼやけ方を表現したいのです
よろしくおねがいします。
ホームページで友達が稼げるようになった情報とか
⇒
http://asaswq3wq.sblo.jp/article/181819223.html 興味がある人だけ見てください。
I0DIFOR3EF
【環境】
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名がまったく意味をなさないというか・・・
何か大きなミスを犯しているでしょうか？
>>321 var contextが別のものであるかのように書いてるけど1つめのcontextは再宣言で亡くなってる
varじゃなくてlet/constで宣言してればちゃんとこれでちゃんとエラー吐いてくれるからvarをやめたほうがいい
>>322 ご指摘いただけて有り難いです。
imageはimage1とimage2に分けたのにcontextは重複させてしまっていました。
それからvarはブロックスコープを持たず、letやconstなら持つということも
知りました。新しい仕様なんでしょうか。
教えてくださってどうも有難う御座いました。
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
HAVC1
商品をweb上でテキスト追加なんか編集できるライブラリってないかな？
多分Canvasだと思うんだがスキルなさすぎてわからん。
画像アップロードツールの使い方がいまいち解りません
このコードどこに貼ったらいいですか？
↓
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,文字列・・・なんちゃらかんちゃら
lud20250107230151このスレへの固定リンク： http://5chb.net/r/hp/1305093769/
ヒント：5chスレのurlに http://xxxx.5chb.net/xxxx のようにbを入れるだけでここでスレ保存、閲覧できます。
TOPへ TOPへ
全掲示板一覧 この掲示板へ 人気スレ |
Youtube 動画
>50
>100
>200
>300
>500
>1000枚
新着画像
↓「Canvasについて語ろう->画像>6枚 」を見た人も見ています：
・ezcastについて語ろう
・★シングルモルトスコッチについて語ろうよCASK#6★
・★シングルモルトスコッチについて語ろうCASK#12★
・★シングルモルトスコッチについて語ろうCASK#25★
・★シングルモルトスコッチについて語ろうCASK#24★
・★シングルモルトスコッチについて語ろうCASK#11★
・★シングルモルトスコッチについて語ろうCASK#15★
・★シングルモルトスコッチについて語ろうCASK#16★
・★シングルモルトスコッチについて語ろうCASK#25★
・★シングルモルトスコッチについて語ろうCASK#20★
・★シングルモルトスコッチについて語ろうCASK#23★
・★シングルモルトスコッチについて語ろうCASK#16★ 避難所
・抜けるfancamについて語ろう ©bbspink.com
・仮想通貨のサロン、note,VALUについて語ろう
・Canon ミラーレス一眼カメラ EOS M5について語ろう！ [無断転載禁止]
・オニツノクロツヤムシCylindrocaulus patalisについて語ろう [無断転載禁止]
・ASP.NETについて語ろう
・樹なつみについて語ろう phase36
・アキュフェーズ/Accuphaseについて語ろう
・VtuberのASMR・音フェチについて語ろうPart1
・樹なつみについて語ろう phase36 [無断転載禁止]
・V tuberのASMR・音フェチについて語ろうPart1
・【PASMO】都営交通無料乗車券などについて語ろう２
・オープンソースPBX Asteriskについて語ろう part 5
・【総合】音フェチについて語ろう【ASMR】 Part.30
・アキュフェーズ/Accuphaseについて語ろう Part101
・アキュフェーズ/Accuphaseについて語ろう Part83
・アキュフェーズ/Accuphaseについて語ろう Part97
・アキュフェーズ/Accuphaseについて語ろう Part107
・アキュフェーズ/Accuphaseについて語ろう Part107
・【総合】音フェチについて語ろうPart 37【ASMR】
・【総合】音フェチについて語ろうPart 47【ASMR】
・【総合】音フェチについて語ろう【ASMR】 Part.11
・【総合】音フェチについて語ろうPart 48【ASMR】
・【総合】音フェチについて語ろう【ASMR】 Part.18
・【総合】音フェチについて語ろう【ASMR】 Part.20
・アキュフェーズ/Accuphaseについて語ろう Part100
・【総合】音フェチについて語ろう【ASMR】 Part.6
・アキュフェーズ/Accuphaseについて語ろう Part98
・アキュフェーズ/Accuphaseについて語ろう Part89
・アキュフェーズ/Accuphaseについて語ろう Part88
・アキュフェーズ/Accuphaseについて語ろう Part96
・アキュフェーズ/Accuphaseについて語ろう Part99
・アキュフェーズ/Accuphaseについて語ろう Part94
・アキュフェーズ/Accuphaseについて語ろう Part79
・アキュフェーズ/Accuphaseについて語ろう Part93
・アキュフェーズ/Accuphaseについて語ろう Part95
・アキュフェーズ/Accuphaseについて語ろう Part103
・アキュフェーズ/Accuphaseについて語ろう Part90
・アキュフェーズ/Accuphaseについて語ろう Part91
・アキュフェーズ/Accuphaseについて語ろう Part106
・【総合】音フェチについて語ろう【ASMR】 Part.13
・【総合】音フェチについて語ろう【ASMR】 Part.19
・【総合】音フェチについて語ろう【ASMR】 Part.15
・【総合】音フェチについて語ろう【ASMR】 Part.27
・【総合】音フェチについて語ろう【ASMR】 Part.26
・【総合】音フェチについて語ろう【ASMR】 Part.22
・【総合】音フェチについて語ろう【ASMR】 Part.22
・【総合】音フェチについて語ろう【ASMR】 Part.17
・【総合】音フェチについて語ろう【ASMR】 Part.25
・【総合】音フェチについて語ろう【ASMR】 Part.28
・【総合】音フェチについて語ろう【ASMR】 Part.21
・【総合】音フェチについて語ろう PART.32【ASMR】
ブックマークへ