Canvasのrotateメソッドは斜めに矩形を描画するときなどに役に立ちますが, デフォルトの状態では回転の中心はCanvasの左上, つまり, (0, 0) が中心となるので意図した回転にならないことが多いです. そこで, translateメソッドを利用します. translateメソッドを利用することで, そのメソッドを呼び出し以降描画の位置を, 指定したぶんだけ移動させることが可能になりますが, それがrotateメソッドの回転の中心にも影響させることが可能です. こんな感じ. var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; //回転の中心を中央に移動
canvasに関するysk_lucky-starのブックマーク (56)
-
ysk_lucky-star 2017/02/08
-
canvasの命令を使って画像を回転させる - 強火で進め
以下のサイトやライブラリを参考にHTML5で導入されたcanvas処理を使って画像を回転処理を行うプログラムを作ってみました。 こちらでプログラムの動作を確認できます。 ライブラリ ExplorerCanvas http://sourceforge.net/project/showfiles.php?group_id=163391 ※ExplorerCanvasについてはこちらを参照して下さい。 Canvas - Canvasの使い方 - HTML5.JP http://www.html5.jp/canvas/how.html 参考にしたサイト Canvas - 画像を組み込む - HTML5.JP http://www.html5.jp/canvas/how6.html Canvas - Canvasリファレンス - HTML5.JP http://www.html5.jp/canvas
-
ナウでヤングな CSS Font Loading - Qiita
Web フォントがレンダリングされるタイミングを得ようとすると、そのやんちゃな挙動を制御するため人類は今まで下記のような対策をしてきた。 Web FontsをHTML Canvasで使う canvas要素にwebフォントを確実に描画する方法 typekit/webfontloader 無知な僕は同様の事象にハマり、一通り調べた後、下記の答えにたどり着いた。 canvas に WebFont を指定するとき、一回どこかの DOM で使う WebFont をレンダリングしておかないと死に至る現象を発見したので皆様もお気を付けください — ダメレオン (@damele0n) April 10, 2014 要するに DOM もしくは canvas 上で、そのフォントが指定されていて一度そのフォントがレンダリングされてからでないと canvas 上はレンダリングされない、ということだ。 (ちなみに
-
-
-
iPhoneページの軽量化テクニック - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
-
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
-
Firefox 13 における HTML5 canvas 要素のアクセシビリティ
昨日 （6月6日） に Firefox の最新版であるバージョン 13 が正式リリースされました。 この Firefox 13 で実装された新機能や変更点に関しては下記の記事で紹介されていますが、 Firefox 13 の主な新機能を紹介します ： Mozilla Developer Street (modest) アクセシビリティコンサルティングを提供する Paciello Group の公式 Blog で、新しい Firefox 13 が canvas 要素のフォールバックコンテンツに対するフォーカスに対応したことに関する記事が上がっていましたので、紹介して見ようかと思います。 原文： HTML5 Canvas Accessibility in Firefox 13 ： The Paciello Group Blog 完全な対訳ではなく、わかりやすいようにポイントをかいつまみながら訳し
-
PNGを解析してJavaScriptでPNGを描く·png.js MOONGIFT
png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。 png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 レコード画像を描く 写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでim
-
HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 - もとまか日記
以前から書いてる、以下の開発向け簡単チュートリアル。 iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム 今回は、これをHTML5のCanvasで作ってみました。 で、ついでにチュートリアル的な内容を書いてみたメモ。 前提条件 前提条件として、ある程度HTML等が分かる人向け、という感じです。また、レンタルサーバの利用等についても割愛です。 その辺の詳細な説明は省いてるのでご了承ください。 HTML5の基礎情報 以前、以下でまとめました。 前から気になってたHTML5について色々調べてみました HTML5のスマホアプリの基本構成 ここから本題のコーディング。今回使う、スマホアプリ向けの基本となるHTMLは以下です。 html> head> meta name="viewport" content="width=device-width, initial-scale
-
8xbet | Link Đăng Nhập 8xbet.com Không Bị Chặn Tại Việt Nam
8xbet là một trong những thương hiệu uy tín, nổi tiếng bậc nhất trên thị trường đổi thưởng hiện nay. Sức hấp dẫn của sân chơi này đã nhanh chóng dấy lên một làn sóng mạnh mẽ, tạo nên cơn sốt khủng làm chao đảo cộng đồng game thủ. Trải nghiệm đỉnh cao, rinh về quà lớn, cùng theo dõi bài viết dưới đây của 8XBet để hiểu rõ hơn về sân chơi này nhé.
-
HTML5 Canvasデスクトップリファレンス
HTML5の一部として仕様が策定されているグラフィック描画のためのJavaScript API、Canvasについて紹介する書籍です。Canvasの2Dオブジェクトの描画に関する簡単なチュートリアルとリファレンスから構成されており、仕様の全体像を簡潔に知ることができます。Canvasでプログラミングをする際には手元に置いておきたい1冊です。なお本書はEbookのみの販売となります。 はじめに 1. Canvasチュートリアル 線の描画と多角形の塗りつぶし グラフィック属性 Canvasの寸法と座標 座標系の変換 座標変換の数学的な理解 座標変換のサンプルコード 曲線の描画と塗りつぶし 矩形 色、透明度、グラデーション、パターン 線を引くための属性 テキスト クリッピング 影 画像 合成 ピクセル操作 ヒット判定 Canvasの実例：Sparkline 2. Canvasリファレンス Can
-
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
-
HTML5のCanvasをFlashライクに使う「EaselJS」が最新版を公開
Flashのエンジニアとして著名なGrant Skinner氏が開発している、HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」の最新版、v0.4が公開されました。 9カ月振りになる最新版では、ビットマップアニメーションやスプライトシートエンジンを全面的に書き換えたとのことです。 completely reengineered sprite sheet engine, which includes a host of new features: multi-image sprite sheets, variable frame dimensions, frame reuse, image preloading, and a new data format. Note that this change will require som
-
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
-
-
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
-
JavaScriptで作られたGAMEBOY COLORエミュレーター | スラド
以前のストーリーでJavaScriptによるPCエミュレーターが紹介されたが、今度はJavaScript/HTML5によるGAMEBOY COLORエミュレーターが作成されたそうだ（GameBoy Online、 IProgrammerの記事、本家/.）。 GAMEBOY COLORエミュレーターを作成したのは米フロリダの19歳、Grant Galitz氏。ローカルに保存したROMイメージを読み込んで実行可能となっており、実際に遊べるスピードで動作する。サウンドの再生も可能だ。 グラフィックはCanvasオブジェクトを使用して実装されるが、Canvasがサポートされない場合にはビットマップイメージが使われるとのこと。ソースコードも公開されている。
-
WWW.AKIRAFUKUOKA.COM BLOG | 今VJするならブラウザででしょ！ HTML5でVJアプリ「Fi-VJ」を制作しました
HTML5ならのVJアプリだって作れるはず！で、作りました Fi-VJ ver1.02 デモページはこちら ファイルダウンロードはこちら (ver1.02) DLしたら@akirafukuokaに声をかけていただけると嬉しいです!! Fi-VJ(ファイブイジェイ)というVJアプリを極々個人的に制作しました。MacのネイティブアプリでもなければiPhone/iPadアプリでもありません。ブラウザで動くHTML5-VJアプリです。確認済み動作環境はMac版Safari 5.0.5だけです。他のブラウザでは確認してません（デモページはSafariとChromeで動くようですが）。というかローカル実行ではSafari以外ではまず動きません。これに関する解説は後ほど。 ここ数年ビデオミキサーにiPhoneやiPodを繋いでプレイしていた私ですが、そろそろPCを使ったVJに戻ろうかと思ったのがちょうど
-
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました