今回はHTMLのcanvas・JavaScriptを使って作る「お絵かきアプリ」シリーズの最後の記事です。 前回・前々回の記事で使用したコードをベースにしているので、まだ読んでいない方は以下の記事を読むことでより理解が深まるかと思います。
HTMLのcanvasとJavaScriptでお絵かきアプリ【線の太さ機能編】｜Web白熱教室
今回はHTMLのcanvas・JavaScriptを使って作る「お絵かきアプリ」シリーズの最後の記事です。 前回・前々回の記事で使用したコードをベースにしているので、まだ読んでいない方は以下の記事を読むことでより理解が深まるかと思います。
HTML5 Canvas 要素のサイズ指定について | まくまくJavaScriptノート
canvas 要素のサイズ指定方法には下記のようなものがあります。 canvas 要素の width、height 属性 JavaScript から見える canvas 要素の width、height プロパティ CSS による width、height プロパティ キャンバスサイズ（描画バッファサイズ）の指定 JavaScript から Canvas API を使用するときに見えるキャンバスサイズ（描画バッファサイズ）は、HTML の canvas 要素の width、height 属性で指定したサイズになります。 <canvas id="canvas" width="200" height="150"> このブラウザは HTML5 Canvas に対応していません。 </canvas>
CGIお絵かき掲示板に苦戦中 | higrikの日記 | スラド
@pagesを離れて別のサーバ(X1Xサーバ)に移転中であるが、CGIにて問題発生。 ここのサーバはniftyやbiglobeのように「CGIはCGIしか置けない」サーバであるため、その設定に苦しむことになる(この件は調べても出てこなかったが、internetarchiveを使用してマニュアルを見て何とか画像が表示されるようになった)。 とりあえずbbsnoteは動かせるようになったものの、今度はお絵かき不可能というなぞの症状が発生。 これはjavaのアプレットを作動させると必ずエラーになるというもの。 エラー。クリックして詳細を確認してください と表示され、クリックすると ClassNotFoundException ～ (ちなみにPHPで動かしているものは普通に動く。その際「警告」が出るが、この場合はその警告は出ていない) 残念なことにそこまで詳しくはないので理由はわかりません。ちなみ
登録不要でレイヤーにも対応した高性能ペイントツール
Sumo Paint（スモー ペイント）は、フィンランドのSumoingが提供するWebブラウザー上で動作するペイントツールだ。ただし、たんなるお絵かきソフトではない。レイヤーが使えたり、特殊フィルターが充実していたりと、すさまじく高機能だ。Webブラウザー上で動いているとは信じられないくらい機能が豊富で、しかも軽快に動く。グラフィック系の仕事をしているプロにも、ぜひ注目してほしいツールなのである。 Webブラウザーで動いていることが信じられない 一般のビジネスパーソンが、仕事でグラフィック系のツールを使うことは、それほど多くないかもしれない。しかし、持っていないとちょっと不安なのも事実だ。画像に文字を追加したり、簡単な図形が必要になったりしたりすることもないわけではないからだ。 そんなとき、Sumo Paintを知っていると心強い。インターネットにさえつながれば、登録不要ですぐ使える。し
HTML5で個人的に最低限必要だと思う記述・タグまとめ。head内に何を書いておけばいいのか？ | WEMO
では、これは必要な記述なのかというと、「別に書く必要はない」とされています。 というのも、検索エンジン側のGoogleはlang属性のことを全く見ておらず、SEO的にも全く無意味なものだと、公式に発表されているのです。（参考：Google「言語指定にlangは使うな」／公式発言） 書く必要はないものだが、不安なら書いておいても別に損はないので、書くか書かないかは完全に好みですね。 manifest属性：キャッシュマニフェストの指定 HTML5からはlang属性の他に、「manifest属性」というのが追加されました。 簡単に説明すると、manifest属性とは「キャッシュデータを利用してオフラインの場合でも最低限の表示ができるようにするもの」で、表示させたい.appcache 拡張子を持ったファイルを指定します。 公式な説明も一応引用しておきますね。 HTML5 タグリファレンス:mani
iPadでお絵かき掲示板｜さとぴあ
PaintBBS NEOはHTML5で作られたしぃお絵かき掲示板のクローンです。 見た目と動作が同じになるようにしぃちゃんとは別の作者の方が1から新しく作り直しました。 対応環境 Chrome/FireFox/Safari/Edge（最近のバージョンのみ） iOS(Mobile Safari) iOS対応です。iPadで描く事ができるお絵かき掲示板です。 PCでは右クリックでスポイトやマスクの操作をします。しかしモバイル端末には右クリックがないのでそのかわりになる「右ボタン」があります。 JavaアプレットのオリジナルのPaintBBSはブラウザの拡大率をあげてもキャンバスの周囲が大きくなるだけです。 1920x1080のフルHD環境では24インチモニターでもUIが小さくて操作が大変です。 しかし、NEOはHTML5なのでブラウザの拡大率をあげればUIもキャンバスも大きくなります。 iPa
しぃペインターをGoogle Chromeで使う｜さとぴあ
この拡張機能をGoogle Chromeに入れるだけでJavaアプレットが使えるようになります。Javaプラグインは必要ありません。 許可したサイトでしか起動しないので拡張機能のアイコンをクリックして許可します。 これで、これまでJavaプラグインで動いていたJavaアプレット=しぃペインターが使えるようになりました。 タブレットのデジタルインク機能をオフにするWindows10でデジタルインク機能を使うとスマートフォンのようにペンでブラウザをスクロールする事ができます。 しかし、その状態でしぃペインターを使うとキャンバスがペンと一緒にスクロールして絵を描く事ができません。ワコムタブレットの設定でデジタルインクをオフにします。
筆圧対応HTML5簡易ペイントツール作ってみた｜NISHIWAKI
Google+でフォローしてる人からPointerEventなるものを教えてもらったのでその機能を使って簡易ペイントツールを試作。オリジナルソースはその人。（改造・拡張した） （全画面版） http://jsfiddle.net/lumis/x9z4t/15/embedded/result/ （ソース付き） http://jsfiddle.net/lumis/x9z4t/15/ 主な機能： ・ペン、エアブラシ（もどき）、消しゴム （グラディエーションペンは未実装） ・IEでもカラーピッカー使用可能にした ・無制限UNDO ・画像出力・保存（状態確認ボタン） ・筆圧対応 ・ペンタブの消しゴム（ペンのおしりの）対応 まあ正直ちゃんとしたペイントツールとは程遠いし、絵描きさんたちがギリギリ困らないレベルの機能しか揃ってないと思うけど、HTML5で筆圧感知してここまで出来るというサンプル程度に認識
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketchpad
Canvas Paint Tool
Canvas Paint Tool
お絵描きツールv1.3.1
canvas2D/spec/will-read-frequently.md at master · fserb/canvas2D
Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true warnings
Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true · Issue #2986 · niklasvh/html2canvas
Canvasに画像が表示されません
POTI-board EVO official website
POTI-board改 官方網站
shi local PaintBBS Web Edition