タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

canvasに関するhatz48のブックマーク (9)

  • Literally Canvas — Literally Canvas v0.5.2 docs - HTML5 drawing board - MS Paint in your web browser

    Note Looking for a multiuser whiteboard, or want some help building a drawing-based web app? Check out Browserboard. Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. Its only dependency is React.js. You can use it to embed drawing boards in web pages. It’s kind of like an extensible MS Paint in JavaScript. Users can sketch drawings and you can do what you like w

  • [Web] スマートフォンとHTML5のCanvasを用いたお絵描きを実装してみた - YoheiM .NET

    HTML5のCanvasというグラフィックを描ける機能と、スマートフォンを掛け合わせて、 スマホで絵を書くWebアプリのサンプルを作成してみました。 サンプルアプリを紹介しつつ、 Canvasで絵を描く実装、タップイベントとの連携、スマホ対応のためのmetaタグなどの 実装内容を記載します(*´∇｀*) サンプル内容 Canvasを用いたお絵描きアプリを、iPhoneに最適化してみました。 Canvas上を指でなぞると線を書くことが出来て、 色の変更と線の太さの変更を行うことができます。 また、ホーム画面に保存としてから、作成されたホーム画面アイコンから起動すると、 検索バーなどの無いアプリ風な画面で立ち上がります。 ぜひお試してみて頂けると幸いです。 http://www.yoheim.net/labo/html5/canvas/canvasForTouch.html お絵描き機能の実装

    [Web] スマートフォンとHTML5のCanvasを用いたお絵描きを実装してみた - YoheiM .NET

  • HTML5のCanvasでペイントツールを作る

    今回はCanvasを利用したペイントツールを作った。 Wacomペンタブレットの筆圧感知にも対応した。 筆圧感知のためにはここから使用環境にあわせたプラグインをインストールする必要がある。 lislis Painter 1.04 Show me / Download zip 機能について Tools (ツール) Brush (ブラシ) ペン先が平坦なブラシツール 太さを1くらいにしてペンタブレットで描くと、鉛筆っぽいタッチになる。 Air Brush (エアブラシ) 輪郭がぼやけたブラシツール ※現状では色を塗り重ねると、グラデーションに段々が出たり、ブラシの縁が微妙に黒ずんで、まるでクリームを盛りつけたようになることがある。 Syringe (スポイト) クリックすると表示されている画像から色を取得する。 alt+clickでも同様の動作。 Eraser (消しゴム) 透明色で塗るブラシ

    HTML5のCanvasでペイントツールを作る

  • HTML5 Canvas Cheat Sheet

    Canvas element Attributes Name Type Default

  • HTML5花火大会から学ぶcanvasの表現力

    HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには？ 花火のお手本コードから見ていきま

  • Canvasリファレンス - HTML5.JP

    HTML5の仕様に基づいて、Canvasで利用できるメソッドやプロパティ（属性）のリファレンスをご用意しました。主にHTML5の仕様の和訳となりますが、HTML5の仕様は非常に分かりにくい説明があるため、一部、図や補足説明を入れました。 各メソッドやプロパティごとにサンプルスクリプトもご用意しましたので、具体的なスクリプティングが理解できます。ブラウザごとの対応についても触れています。 皆様のCanvasの理解にお役に立てれば幸いです。 HTMLCanvasElement HTMLCanvasElementのメソッド

  • スタイルと色を適用する - MDC Doc Center

    目次1. 色1.1.1. fillStyle の例1.1.2. strokeStyle の例2. 透明度2.1.1. globalAlpha の例2.1.2. rgba() を使った例3. 線のスタイル3.1.1. lineWidth の例3.1.2. lineCap の例3.1.3. lineJoin の例3.1.4. miterLimit プロパティのデモ4. グラデーション4.1.1. createLinearGradient の例4.1.2. createRadialGradient の例5. パターン5.1.1. createPattern の例6. 影付き効果6.1. 影付きテキストの例 図形を描く についての章では私はデフォルトの線と塗りつぶしのスタイルしか使いませんでした。この章では使用できる全ての canvas オプションを探検していき、最終的に私たちの図形をもう少し魅力

  • JavaScript: canvas で点線・破線を描くためのライブラリを作ってみた | anobota

    JavaScript: canvas で点線・破線を描くためのライブラリを作ってみた Javascript + canvas で点線・破線を描画するためのライブラリです。 Description: A library to draw dotted/dashed line for Javasctipt/canvas. canvas を使ってちょっとした折れ線グラフを書かせてみようとしたところ、点線・破線が描けないので困りました。 なぜ困るかというと、モノクロ印刷するときに系列の区別を付けにくくなるからです。 という訳であまり出来の良くない再発明っぽいですが作ってみました。 ベタに書いてみただけなのでパフォーマンスとかはあまり良くない（アニメーションなどさせると辛い）と思います。 Firefox でしか動作確認していません。 円弧やベジェ曲線は描けません（自前で何とかする必要があります）。 パ

  • HTML5　canvas -その１- | LayOut blue

    結構HTML5では知名度は断トツ高い（そんなことないかな？）と思われます『canvas』要素。 すでに制作してみた方も多いと思いますが、実際に『canvas』でなにができるのか、いわゆるHow toを全4回に渡ってご紹介します。今回は第1回目ということもあり、HTML5についてのおさらいからご説明致します。 HTML5の新要素 HTML5で新たに加わった要素です。 ・文書構造

  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.