[69-9] Canvasでグラフィックスの変形をしよう（拡大・回転・移動・反転など）
[69-9] Canvasでグラフィックスの変形をしよう（拡大・回転・移動・反転など） 最終更新日：2019年02月06日 （初回投稿日：2015年02月02日） これまでは、Canvas に基礎的なグラフィックスを描いてみました。 四角形・三角形（直線）・円弧、ライン（曲線）、画像、テキストをやってみましたね。 今回は、Canvas に描画したそれらのグラフィックスを変形させてみます。 Canvas にはグラフィックスの座標を自動的に変換するメソッドも用意されていて、拡大・回転・移動・反転などはそれを利用します。 これまでいろいろ描画してみて、1度指定した「状態」は、指定を変えない限り、ずっと影響し続けることがわかりました。 （「状態」とは具体的には、線や塗りの指定、透明度の指定、線のスタイルの指定、クリッピング領域の指定、シャドウの指定、重なり合った描画領域の指定、フォントの指定です。
![[69-9] Canvasでグラフィックスの変形をしよう（拡大・回転・移動・反転など）](https://cdn-ak-scissors.b.st-hatena.com/image/square/254d41540b920b29aaaa3841184a7a8ed6d3817f/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-74.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F150209_2.jpg)
HTMLのcanvasとJavaScriptでお絵かきアプリ【線の太さ機能編】｜Web白熱教室
今回はHTMLのcanvas・JavaScriptを使って作る「お絵かきアプリ」シリーズの最後の記事です。 前回・前々回の記事で使用したコードをベースにしているので、まだ読んでいない方は以下の記事を読むことでより理解が深まるかと思います。
HTML5のCanvasを使ったお絵かきツールまとめ
昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。なんて思っているとCanvasでお絵かきアプリ (全8回) – プログラミングならドットインストールというレッスンがあるのを見て、突然HTML5のCanvasで作ったお絵かき掲示板を作ってみたいと思うようになりました。 いや、でもそもそもすでにCanvasで作られたお絵描きツールはあるんじゃないかと思い、調べてみたらすでにいろいろある模様。以下、見つけたもののリスト。 イラストブック – 無料レンタルお絵かき掲示板 今回見つけたもののなかで最もお絵かき掲示板っぽかったもの。普通にChromeで見てみるとかなり高機能なFlashを使ったお絵かきツールになるのですが、ChromeのUserAgent
JavaScript: ペイントツールの作り方
JavaScriptで簡易ペイントツールを作ってみました。 サンプルコードも掲載していますのでご自由にアレンジして使ってください。 動作サンプル ペイントツール概要 上にあるセレクトボックスで描画色を選択 mousedownで描画開始 mousemoveで描画 mouseupで描画終了 htmlファイル セレクトボックスとキャンバスのタグを記述しています。 セレクトボックスは、行ごとに背景色を設定するようにしています。 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ペイントツール</title> <script type="text/javascript" src="sample01.js"></script> <style> canvas { background-color: green; b
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で動かしているものは普通に動く。その際「警告」が出るが、この場合はその警告は出ていない) 残念なことにそこまで詳しくはないので理由はわかりません。ちなみ
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
マイクロソフトがHTML5仕様からCanvas要素を外すように提案、しかし一刀両断に...
HTML5の仕様を議論するメーリングリストで、マイクロソフトがCanvas要素をHTML5から外すことを提案したことが、いくつかのニュースサイトで報道されています。マイクロソフトは主要なWebブラウザのベンダとして唯一Canvas要素を実装しておらず、そのベンダが「HTML5の仕様からCanvas要素を外した方がいいのでは？」という提案をしたことで騒ぎになっているようです（参考：Ajaxianのニュース、Webmonkeyのニュース）。 以前からあったCanvas分離の議論 HTML5の仕様からCanvasを外し、Web WorkersやWeb Storage、Web SocketsのようにHTML5の周辺仕様として独立して議論を進めようという提案は以前からありました。 その理由として、Canvasについての議論がHTML5全体の進捗を遅くしており、分離した上で機能やアクセシビリティの向上
筆圧対応HTML5簡易ペイントツール作ってみた｜NISHIWAKI
Google+でフォローしてる人からPointerEventなるものを教えてもらったのでその機能を使って簡易ペイントツールを試作。オリジナルソースはその人。（改造・拡張した） （全画面版） http://jsfiddle.net/lumis/x9z4t/15/embedded/result/ （ソース付き） http://jsfiddle.net/lumis/x9z4t/15/ 主な機能： ・ペン、エアブラシ（もどき）、消しゴム （グラディエーションペンは未実装） ・IEでもカラーピッカー使用可能にした ・無制限UNDO ・画像出力・保存（状態確認ボタン） ・筆圧対応 ・ペンタブの消しゴム（ペンのおしりの）対応 まあ正直ちゃんとしたペイントツールとは程遠いし、絵描きさんたちがギリギリ困らないレベルの機能しか揃ってないと思うけど、HTML5で筆圧感知してここまで出来るというサンプル程度に認識
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketchpad
Canvas Paint Tool
HTML Canvasでお絵描きアプリを作ってみた | Tech Blog | CRESCO Tech Blog
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に画像が表示されません
[HTML5] Canvasで描く色を自由に選ぶUI - YoheiM .NET