2012年3月Web制作30: Canvasについて語ろう (112)
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
ニュースサイト運営者が語り合うスレ 9記事目 (689)
webは求められるスキルが多すぎ!! (474)
【Web作成の】痛い企業サイトver.6【基本無視】 (391)
WEBディレクターの集い3 (268)
【WHATWG】HTML5 Part4【W3C HTML WG】 (139)
【しゃくれ?】よく理解できないWeb制作料金表 (264)
Canvasについて語ろう
- 1 :11/05/11
- 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 :11/05/11
- 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 :11/05/11
- ■関連スレ
【WHATWG】HTML5 Part3【W3C HTML WG】
http://hibari.2ch.net/test/read.cgi/hp/1295872957/
+ JavaScript の質問用スレッド vol.86 +
http://hibari.2ch.net/test/read.cgi/hp/1303790568/
【誰か】jQueryのここがわからない【助けて】
http://hibari.2ch.net/test/read.cgi/tech/1229881548/
- 4 :11/05/11
- そして誰も語らないのであった
===========完===========
- 5 :11/05/12
- 語るにしてもcanvasについてより描画アルゴリズムについてだろうね
- 6 :11/05/12
- そんな限定的な話題にしたらもっと廃れるぞw
- 7 :11/05/12
- FAQっぽいものを充実させてください
┌──┐
┌┴┐ ├┐
│ ├┬┘│
│┌┴┤ │
└┤ └┬┘
└──┘
こんなふうに長方形を重ねるのは無理です
とか
水平や垂直の直線や長方形で境界をくっきりさせるには0.5pxずらす
とか
- 8 :11/05/12
- 今やってる勉強が終わったらサンプル載せてってやるから待ってろ
- 9 :11/05/13
- ※デフォルトでは読み込んだ画像のデータをputImageData()できません
これさえなけりゃ気合いで何でもありにできるのにな
- 10 :11/05/17
- 間違えたgetだった
- 11 :11/05/20
- >7は普通に3次元空間では可能
つまりWebGLで板ポリでやればいい
あとその見た目にするだけなら2dでもできる
- 12 :11/05/20
- 矩形や画像を2dで>>7みたいに配置するのは無理じゃないの
http://himajin.moe-nifty.com/photos/uncategorized/2007/10/18/damashi005.jpg
こういうだまし絵の立体みたいに
一部を切断して繋がってるように見せかけるような方法くらいしか思いつかないけどそれはもうベツモノだし
- 13 :11/05/20
- と言ったものの
それは他のラスターグラフィックソフトも同じでcanvasだけが非力というわけではないか
- 14 :11/05/20
- そういやgetContextの引数2dしかみたことないけど3dとかあるのかすら
- 15 :11/05/20
- それぐらい日本語和訳みれば3dあるかどうかわかるだろ・・・
- 16 :11/05/20
- ケンカうってんの?
- 17 :11/05/25
- つ 'webgl'
- 18 :11/05/25
- w3cが言ってたwebGLの致命的な欠陥ってどうなったんだ?
なんとかしてくんなきゃ手が出せないぜ
- 19 :11/05/25
- (x1,y1) (x2,y2) (x3,y3) (x4,y4)の各四点に四隅が一致した画像ファイルを貼付けるにはどうすればいいでしょうか。
対角線で二分割した三角形をそれぞれ三点に一致させるしかないのでしょうか?
- 20 :11/05/28
- これモノクロにしたりするの時間かかるね
- 21 :11/06/10
- age
- 22 :11/06/19
- https://markup.mozilla.org/ja/#/
これなんかすげえな
- 23 :11/06/19
- そのうちフォトショとかシーケンサの代わりになるサイトが出るな
- 24 :11/06/20
- http://ultra-zone.net/canvas
- 25 :11/06/20
- >>24
特におもしろみもないフツーのものでした
- 26 :11/06/20
- <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 :11/06/20
- >切り抜いた赤い円の内側(円の中心方向)にも影を付けるにはどうすればいいですか?
これがどういう意味かよくわかんなからそれ以外の部分だけ
http://ideone.com/AZtYY
- 28 :11/06/20
- >>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 :11/06/20
- 切り抜き部分の透過はsave()、restore()使えばひとつのcanvasでできそうだけど無理かな
- 30 :11/06/21
- >>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 :11/06/21
- rect()が時計回りに定義されてるから、円弧を反時計回りにして
ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
ctx.rect(150, 150, 200, 200);
とシンプルにもできる
clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
時計回り、反時計回りって言ってる意味を調べてみるといい
- 32 :11/06/21
- ctx.beginPath();
ctx.arc(250, 250, 150, 0, Math.PI * 2, true);
ctx.closePath();
だけを書くと赤い丸が表示されて
ctx.rect(150, 150, 200, 200);
だけ書くと赤い四角が表示されますが
何故両方書くと丸の中がくり貫かれて見えるようになるのですか?
- 33 :11/06/21
- >>30-31
イメージ通りの結果です!ありがとうございますm(_ _)m
> clearRect()は普通何かを切り抜くのに使うんじゃないってのと、
まとめてパスを描いてからまとめてfillすれば切り抜かれるんですね
closePathされているとそれぞれ別個のものとして塗りつぶされるんだと思ってました
切り抜くのはclearRectだと思っていたので四角にしか切り抜けないんだとばかり
またはglobalCompositeOperationを使わないといけないのかなと
> 時計回り、反時計回りって言ってる意味を調べてみるといい
これはよくわかりませんでした
今回は右回りでも左回りでも結局一周して円を作るので同じ結果になると思っていました
が、ためしに>>30のほうをtrueに、>>31のほうをfalseにしてみると
たしかにうまく切り抜かれませんでした
どうしてこうなるのかわかりません
わかりませんが、これ聞いてなかったらまたハマるところでした
気を配っていただきありがとうございます
- 34 :11/06/21
- > 時計回り、反時計回りって言ってる意味を調べてみるといい
これ理解できました
本当にどうもありがとうございます
- 35 :11/06/23
- canvasで文字列を画像として出すのってどーやんの?
- 36 :11/06/23
- https://developer.mozilla.org/ja/Drawing_text_using_a_canvas
- 37 :11/06/24
- 中が塗りつぶされた五芒星を描画しなさい
- 38 :11/06/24
- fillText("★", 0, 0);
- 39 :11/06/25
- >>38
想定してなかったが大正解だな
- 40 :11/06/26
- https://developer.mozilla.org/ja/Canvas_tutorial/Using_images#section_7
> 以下の例で外部画像を小さな折れ線のグラフ背景として使っています。
> 背景を使うと入念に背景を描く必要がないのでスクリプトがかなり小さくなる場合があります。
canvasで描けそうな場合でもあらかじめ画像を作っておいてdrawImageで読み込んだほうがいいんですか?
コードが短くなるというだけで速度とかは逆に遅くなる?
- 41 :11/06/26
- canvasの例文wikiみたいなのやれば儲かるよ今ならね
- 42 :11/06/26
- MDCでおk
html5.jpでおk
ってのが世間の風潮
- 43 :11/06/26
- そこらは例文というか解説
俺もやろうか考えたけど面倒くさいからやってない
- 44 :11/06/26
- ブログでゲームの作り方の解説はしたが
高度すぎたのか質問攻めにあって放置してるわ
ゲームテーマにして記事書くとありがたく思われるかもね
- 45 :11/06/26
- そのゲーム解説はJavascriptすか
- 46 :11/07/04
- canvasでsvg女子みたいに人体描画しようとした奴いる?
- 47 :11/07/09
- x,y,zを渡すと直方体を描画する関数を作成しなさい。
- 48 :11/07/09
- \ ヽ ! | /
\ ヽ ヽ / / /
お断りだああああああああああぁぁぁ!!
\ | / /
,イ
 ̄ -- = _ / | --'''''''
,,, ,r‐、λノ ゙i、_,、ノゝ -  ̄
゙l ゙、_
.j´ . .ハ_, ,_ハ (.
─ _ ─ { (゚ω゚ ) /─ _ ─
). c/ ,つ ,l~
´y { ,、 { <
ゝ lノ ヽ,) ,
- 49 :11/07/09
- >47
それはどのレベルまでやるんだ?
簡易設計図みたいに遠近法もなしの線だけでできた直方体か?
遠近法や陰、グラデーションの光源処理までさせたいのなら角度や距離等他にも数値が欲しい
そしてWebGLでやる
- 50 :11/07/10
- 直方体っぽくなればどんなのでもよしとします。
webGLはセキュリティー的になんかダメです。
canvasのみで作成しなさい。
- 51 :11/07/19
- 関係ないけど画像のrgb値を調べる装置を作ったぜ
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=iro.html
- 52 :11/07/19
- Canvasって数値配列に直接対応するフレームバッファを持っていたりするから、レンダリングは全部ソフトウエアでやるんですよね?
CPUの中の妖精さんたちが、1ピクセルずつRGB値を計算する、みたいな・・・
やはり、アルファ値の指定や塗りつぶし系の処理は思いっきり遅くなるんでしょうか?
- 53 :11/07/20
- >>52
大きい面積を塗りつぶすなどする場合はかなり遅くなると思います。
IE9だとFirefox5とかに比べて速いのでハードウェアアクセラレーションが効いているのかもしれません。
- 54 :11/08/05
- ttp://www.ibm.com/developerworks/jp/web/library/wa-html5fundamentals4/
- 55 :11/08/10
- canvasに動的に画像を作らせたぜ!
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=240&file=syk.html
- 56 :11/08/10
- >55
おもろい。
スライダー付けてリアルタイムで変化したらもっと(・∀・)イイ
- 57 :11/08/11
- それをやると無理やり変化させてるのがモロバレなんだぜ
- 58 :11/08/11
- putImageData使えば、グラフィックソフト張りにいろいろできるじゃん、て思って実験してみました
作ってみたのは、ピクセル単位で任意のフィルタ処理するスクリプト
結論から言うと、JavaScriptの演算速度が遅過ぎて、現代の速度感覚にはあわないかと
環境はSafari 5.1、Xeon 2.27Ghz 8コア
500x500ピクセルのキャンバスを想定
・まず、ブラウザが1スレッドしか割り当ててくれない為、CPUの使用率は絶望的…1コアのみ処理が集中してるご様子
・単純な輝度の上げ下げだと、200msぐらい、ブラーフィルタだと幅1ピクセルでも500msぐらいから
・Web Workersではジョブ生成時にデータコピーを行うためか、明度を倍にするフィルタですら5秒ほどかかり、あまり期待できない感じ
・表示速度は問題なし。put後ラグなしで表示されます
正直なところ、キャンバスで動作する、任意のフィルタが使える画像処理アプリを作ってみたかったのですが、レスポンスなど考えると当面は無理そうです
JavaScriptの処理速度の底上げ、マルチスレッドの対応orGPU支援あたりだけど、あんまり期待が持てないなー
- 59 :11/08/11
- Workerの使い方が下手なだけ
- 60 :11/08/11
- ふむ
とりあえず処理対象ピクセルのみピックするとして、10スレッドで割ってみると、上限は上がったけど頭打ちになります
メッセージのやりとりのオーバーヘッドが大きい、って所でしょうか大先生
- 61 :11/08/12
- みんな似たようなこと考えてんな
火狐で緻密な描画するとブラクラ状態だったが火狐5にしたらオペラ・クローム並になったぜ
- 62 :11/08/12
- IE9にしたらネイティブアプリ並になるよ
- 63 :11/08/13
- いろいろ調べてた所、大きな数の添字アクセスって高コストなんですね
500x500px 4ch として、Image.data の中身は1,000,000要素の配列。
これを縦横分割して二次元配列とした配列に入れ直した場合とで、それぞれのピクセルに演算をする速度を比較したんだけど、
一次元配列の場合より二次元のほうが1/3の時間で済みます
二次元配列の、一次元目をローカル変数に置いて処理すると、1/10まで抑えられました
置き換えの処理速度は計算にいれてませんが、全取得して代入すると元より高くついちゃうので、分割してピクセル値を読み取る仕組みが必要ですね
そのあたりをうまくやれば改善できるかもです
IEは…今までの散々な歴史があるので、まずは当たり前の事を当たり前にこなしてくれれば、、;
- 64 :11/08/22
- webGLに欠陥が見つかったとき、IEが対応させてもねーのに懸念を表明した時は何様だと思った
- 65 :11/09/19
- 質問です
Canvas内に図面を書いているのですが、寸法を縦書きにする方法をお教えください。
「1000」という文字をそのまま90°回転させたものを1000毎に複数個並べたいのですが、
var rad = arc/180*Math.PI;
ctx.rotate(rad);
ctx.fillText(txt,X,Y,maxWidth);
こんな感じのことをすると、1個だけ表示されて、残りはどっかに飛んでいってしまっているようです。
回転する座標がなんかcanvasの左上にあるのかもしれません。
どなたかご存知でしたらお教えください。
- 66 :11/09/19
- 自己解決しました
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 :11/09/19
- つづき
ctx.fillText(txt,exX2,exY2,maxWidth);
ctx.rotate(rad2);
} else {
ctx.fillText(txt,exX,exY,maxWidth);
}
}
これで望んでいる位置に角度のついたテキストを配置できます。
やってる内容としては、rotateで回転した座標系上で逆回転させた座標を取得して、
そこにテキストを配置しているので、align等が望み通りにはできませんが.....
- 68 :11/09/19
- 訂正
function arcTxt(ctx,txt,x,y...
のxとyをexXとexYに変えてください。
もしくは関数内のexXおよびexYを、xおよびyに変換してください。
失礼しました。
- 69 :11/09/28
- 2時間で自己解決する男の人って
- 70 :11/09/30
- ザ他力本願
- 71 :11/10/14
- >>37
>>38
過去ログから順番に見てたが爆笑したw
- 72 :11/11/20
- audio + canvasでゲーム作ったぜ!
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=hos.html
- 73 :11/11/24
- すげえけどソースが汚ねえ
- 74 :11/11/24
- >>72
よく出来てるんだけど
ルールがいまいちわからん
- 75 :11/12/30
- 保守
- 76 :12/01/27
- うは〜
audioで波形作ってcanvasで表示させたぜ〜
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=oto2.html
- 77 :12/01/27
- すげー!
と思ってコード見たら読みづれぇぇ!
これって、音ソースをbase64エンコードして
dataスキームで<audio>に食わしてる
であってる?
- 78 :12/01/27
- 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 :12/01/27
- >>78
面倒くさいから
そのままコピペして動けるものを一式張って
- 80 :12/01/27
- ありがとございます。
http://ailinksh.kojyuro.com/minigame3/hosizoraTest.html
私のパソコンで見ると、画像の縦横比が3対1くらいで表示されてます。
未熟な私にソースのアドバイスお願いします。
- 81 :12/01/27
- >>80
きめえコードだな
俺様が手直してしてやるからまってろ
- 82 :12/01/27
- がーん、きめえ。
少し落ち込みました。
きちんとしたコードの書き方を習ったことがないので勉強になると思います。
期待して待っておきます。
どうもすいません。
- 83 :12/01/27
- >>80
ほらよ
http://codepad.org/VS1I0oix
- 84 :12/01/28
- >83
あのページ開けませんけど?
とりあえず自己解決したので報告します。
styleのwidthとwidthの二つが別物だった。
ということでした、両者のサイズを同じにすれば問題ないようです。
解説サイトをよんで勉強したのですが基礎的なことなので解説サイトでは最初に書いててほしい気もします。
- 85 :12/01/29
- >>77
あってるぜ
waveヘッダー(コピペ)に配列くっつけてbase64エンコード(コピペ)して
dataスキームでaudioのsrcにぶっこんで鳴らしてるぜ
- 86 :12/01/29
- 画像を読み込んでCanvasに表示させると
2倍サイズの画像を使ってもぼやけちゃうんだけど
これはこういう仕様?
- 87 :12/01/30
- >>85
今すぐどうこうじゃないけど
そのうち音鳴らすことがあった時
パクっていい?
- 88 :12/01/30
- いいぜ
- 89 :12/01/30
- >>88
出来たらgithubにあげて有名人になってください
- 90 :12/02/15
- 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 :12/02/18
- こっちにも貼ろうとしたら見つかってたぜー
- 92 :12/02/19
- var image = document.createElement('img');
image.src = context.toDataURL()
で<img>化した画像に、適当な名前をつけたいんだが出来る?
保存させるときに名前付いてないのが困る
- 93 :12/02/19
- cgiに画像名とdataURLを投げてファイル化して
srcに投入するって手はあるかもしれん
が、DOMのみで出来ればいいんだが・・・
連投失礼
- 94 :12/02/19
- >>90
putImageDataで透過出来てるってどういうことなの・・・
- 95 :12/02/20
- ちょっと違うけど簡単に書くとこうだぜ!
1 背景をput
2 aに全体をget
3 ボールのimageの.dataを1ピクセルごとに見て
ボールの位置のaの.dataを置き換える
4 aをput
1フレームで3回全体をとったりはったりしなきゃならない驚異の技だぜ!
- 96 :12/02/23
- concat()で.dataの高速複製ができたらいいんだけどな
- 97 :12/02/23
- ピクセル単位で合成してたんだな
いつも
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 :12/02/24
- たぶん大量に透過させない限りcanvasの機能使ったほうが早いぜ〜
- 99 :12/02/24
- 勉強になりやした
ぜ〜の人ありがとう
- 100 :12/03/02
- canvasマリオがレベル高過ぎて吹いたぜー
ってかあれどうなってんの??
setTimeoutとか使ってないっぽいんだけど
- 101 :12/03/04
- 自己解決しますた。。普通にinterval使ってました
- 102 :12/03/28
- HTML5のCanvasの勉強にペイントのようなものを作っているのですが、
lineWidthを太くすると、
http://f.hatena.ne.jp/ogatashi/20110605130608
このような線になってしまいます。
これは何が原因で、どのように対策すればいいのでしょうか?
http://ascii.jp/elem/000/000/513/513377/index-4.html
を参考に作っています。
- 103 :12/03/28
- その都度begin()stroke()begin()stroke()ってやってる?
- 104 :12/03/28
- mousemoveにイベントハンドラを設定し、
beginPath
moveTo
lineTo
stroke
closePath
の処理を繰り返しております。
素早くマウスを動かすとスムースな線が引かれ、ゆっくり動かすとリンク先のようになるため
mousemoveイベントが1px毎に発生し、1pxの太い幅が引かれそのようにトゲトゲのような
ものになっているのかと思います。
- 105 :12/03/28
- じゃ前回の位置からの距離はかって
最低いくつなら線引くってやればいんじゃね
距離=Math.pow((前回X-今X)*(前回X-今X)+(前回Y-今Y)*(前回Y-今y),0.5)
- 106 :12/03/28
- >>105
ありがとうございます
私もそれを考えてみたのですが、
その最低の距離を大きくすると、小さな角を持った線が引けなくなり、
小さくすると、少し太くなるものの同じような状態になります。
また、大きくした状態でも、いろいろな角度に移動させると同じような状態になります。
- 107 :12/03/28
- 隙間が開くのは当たり前なんだが。
目で見て納得できるようにjsをこうしてみ。
http://ideone.com/li1ot
あとな、原因を追求するときはちゃんとログを取るように。
〜かと思います、で済ませるなよ。
対策は、自分で四辺形を描くしかない。
- 108 :12/03/28
- rectで書いたら角が円にならずにカクカクにならない?
- 109 :12/03/28
- 線引くたびにclosePathしてんだから、どっちにしろ角は丸くならねえよ
mousedown時にbeginPath(), moveTo()
mouseup時にclosePath()すればいい
- 110 :12/03/28
- >>109
ありがとうございます
そのように書いてみたのですが、mouseupしたときに引かれる線は以前と同じでした。
- 111 :12/03/28
- http://ideone.com/E12Py
- 112 :12/03/29
- >>102
曲がり角に太さを直径とする円を描画すればなめらかになるぜ
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
■■ HP評価スレッド vol.55 ■■ (881)
代替スタイルシートに萌え〜 (545)
企業のWeb担当 (231)
《今日は》やる気がない時どうしてる? 3《寝る!》 (864)
【しゃくれ?】よく理解できないWeb制作料金表 (264)
レースクイーン・コンパニオン系サイト管理人のスレ (174)
--log9.info------------------
【Max】マックス・ローチ【Roach】 (135)
東大法学部卒 鈴木重子嬢の歌について (191)
【LP】ジャズ聴くにはどちらがいいのPart2【CD】 (679)
ビル・エヴァンス Bill Evans (1929-1980) part15 (823)
【サックス王子】鈴木央紹【その名はhstg】 (442)
★ウィントン・ケリー★ (341)
日本ではなぜマルサリスの人気が出ないのか (315)
マイルスの最強アルバムはなんですか? 2 (185)
ジャズミュージシャンに纏わる噂 (438)
【ジャズライター】島田奈央子【元アイドル】 (346)
日本のジャズクラリネット界の現状について (713)
ピュアオーディオ総合スレッド@JAZZ (366)
ミシェル・カミロ part2 (180)
塩谷哲 (574)
関西のジャズ★3 (356)
Miles Davis 電化マイルススレッド Part 29 (365)
--log55.com------------------
◎2人目育児を語る part28◎
【育児中でも】ファッションについて語ろうpart30【オサレ】
【きこたま】酒井景都の育児を語るスレ
夫の年収1000〜1400万で妻非課税の育児事情23
辻希美の育児を語るスレ★32
【反抗期】2歳〜3歳児の日常 Part114【成長】
■公文教室ってどうよ■43
今2人目以降妊娠中の人 集まれ! part44