構文 context . globalCompositeOperation [ = value ] 現在の合成処理を返します。後述のリストの通りです。 値をセットして、合成処理を変更することができます。未知の値は無視されます。 仕様 globalCompositeOperation 属性は、どのように図形や画像を現存するビットマップ上に描画するのかをセットします。それらは、globalAlpha が与えられると、現在の変換マトリックスが適用されます。この属性値には下記リストの値をセットしなければいけません。下記では、描画元イメージ A はこれからレンダリングしようとしている図形や画像を表し、描画先イメージ B は現在のビットマップ状態を表します。 source-atop A atop B。描画元イメージのうち、両方のイメージが不透明な部分が表示されます。描画先イメージのうち、描画先イメージ
html_canvasに関するnilabのブックマーク (40)
-
nilab 2016/03/16
-
canvasにCSSでwidthとheight指定した際にはまった件: mitsuruogの日記
30歳からまじめにIT業界で働きだしたフロントエンドエンジニアになりたいJavaプログラマ。 あたらしいブログはこちらです。 http://blog.mitsuruog.info/ canvasやっている人には常識なんだろうが晒しておく。 やりたかったことは、canvasのwidthとheightを共に200pxにして、中に100px×100pxの図形を描くこと。 下の画像を見て欲しいのだが、右のcanvasでは描画した図形が縦に伸びてしまった。 まず左の実装（canvasタグに直接widthとheightを指定する）を見て欲しい。 次に、右の実装（cssでcanvasタグにwidthとheightを指定する）を見て欲しい。 左右の実装の違いはwidthとheightをどこで指定するかという点であるが、こんなにも結果が異なるとは正直驚いた。 これはcanvasのデフォルトのサイズが300p
-
HTML5 Canvas の謎 - hidemonのブログ
謎というか私がなにかを理解していないだけなんだろうけど。。Canvasを作る作り方によっては、サイズが上手く設定されない、というおはなし。 Canvas の作成 200x200のCanvas を4つの方法でつくってみる。まずは、普通に静的に作る。 <div id="placeHolder"> <canvas id="static" width="200" height="200"></canvas> </div>次に3つの方法で動的に作る。 $("#placeHolder").append($('<canvas ' + 'id="dynamic0" width="200" height="200" ></canvas>')); $("#placeHolder").append($('<canvas/>', { id: "dynamic1", width: 200, height: 200
-
-
-
measureText() メソッド - Canvasリファレンス - HTML5.JP
構文 metrics = context . measureText(text) 現在のフォントにおける指定テキストの長さを持った TextMetrics オブジェクトを返します。 metrics . width measureText() メソッドに引き渡したテキストの幅を前もって返します。 仕様 measureText() メソッドには、ひとつの引数 text を与えます。このメソッドが呼び出されると、ユーザーエージェントはすべての空白文字を U+0020 SPACE 文字に置き換えなければいけません。それから、テキスト text が入ったひとつのインライン・ボックスを入れた、無限に幅が広い仮想の CSS ライン・ボックスを形成します。この CSS ライン・ボックスは、すべてのプロパティに初期値を持ちます。ただし、コンテキストの現在のフォントにセットされているインライン要素の 'fon
-
-
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
-
-
[ヅ] HTML 5 Canvas と SVG の勉強に使えそうな参考資料サイトあれこれ (2011-08-19)
お勉強がてら HTML 5 Canvas と SVG でラインアートをやってみた (Firefox5と6でのみ動作確認)。 ⇒ lineart by canvas ⇒ lineart by svg 以下、勉強に使った参考資料とか。 HTML5 Canvas の参考資料 リファレンス大事。最初から最後までほとんどこれしか見てない。 ⇒ Canvasリファレンス - HTML5.JP 本家はこのへんだと思うけど見てない。 ⇒ HTML Canvas 2D Context ⇒ HTML5 ⇒ 4.8.11 The canvas element — HTML5 良さそうなチュートリアル。 ⇒ Canvas チュートリアル - MDN Docs イラスト付きで豊富なチュートリアルとサンプル。ただしプレゼン資料なのでざっと眺める感じ。 ⇒ HTML5 3Days Tech Talk 2009-10 C
-
-
-
Internet Explorer 10 Test Drive
Interested in checking out the new Web platform capabilities of Internet Explorer 9? Download the Internet Explorer Platform Preview right now. Welcome and thank you for investigating the first Internet Explorer Platform Preview. This release represents only a portion of the capabilities that will be in the final IE9 Web platform. Check back frequently, we will be updating the Platform Preview reg
-
HTML5花火大会から学ぶcanvasの表現力
HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには？ 花火のお手本コードから見ていきま
-
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
-
FlapjaxでHTML5 Canvas/SVGアニメーション - 読み書きプログラミング
スマートフォンやタブレットなど急成長中のプラットフォームでは、FlashやSilverlightの代わりにHTML5 Canvasを使う流れが生まれています。でもまだCanvasは描画だけでアニメーション機能はありません。だからJavaScriptでアニメーションを作ることになります。 その時、きっとリアクティブプログラミングが主流になるんじゃないかなーと思って、Flapjaxを使ったアニメーションをやってみました。 Flapjaxとは 2006年から2009年にかけて開発されたリアクティブ(データフロー)プログラミング言語です。HTMLへの埋め込み型言語で、コンパイラはブラウザが実行可能なHTML+JavaScriptコードを生成します。 リアクティブプログラミングというのは、オブジェクト指向が絡み合った生物的なエコシステムの世界で、函数型プログラミングが時間の概念のない静寂な数理の世界
-
-
[html5-developers-jp:868] 「canvas」と「svg」
メールアドレスがこのグループでは匿名化されているか、メンバーのメールアドレスを表示する権限がないため、元のメッセージを表示できません こんばんは、大阪の城口と申します。 いつも皆様の書き込みを拝見させていただいております。 さて今回、勇気を持って投降させていただいたのは表題の通り 「canvas」と「svg」についてになります。 HTML5では目玉となっている「canvas」には当然、注目しているのですが IE9でサポートされる事になった「svg」についても個人的に注目しております。 ですが、これまでマイクロソフトが「svg」への対応をしてこなかったためか 情報が少なく参考になるものがWEB上であまり見かけれませんでした。 このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃいますでしょうか？ 後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸
-
-
SVG vs. Canvas? « HTML5.JP ブログ
先日の HTML5 3Days の Tech Talk で Canvas と SVG の違いを簡単に説明しましたが、これを深く追求してレポートされている方がいらっしゃいましたので紹介します。 2009 年 10 月にカルフォルニアで開催された SVG Open 2009 で、ヘルシンキ大学の Samuli Kaipiainen 氏と Matti Paksula 氏によるプレゼンテーション SVG vs. Canvas on Trivial Drawing Application で、SVG と Canvas の特性の違いや、それらを組み合わせる方法などが解説されています。このプレゼンテーションの内容は、こちらの資料に詳しく説明されています。 このプレゼンテーションを要約すると、次の通りです。 ピクセル描画では Canvas が優れている。SVG でもできないことはないが、ピクセルごとにノー
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました