canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
| bravesoft ブレイブソフト（東京）
TexturePackerはスプライトシートを作成するためのツールです。今回はそのTexturePackerの使い方を紹介したいと思います。TexturePackerはCocos2dだけでなく多様なフレームワークに対応しています。主要なフレームワークの一部をあげますと、 AndEngine Corona Cocos2d LibGDX Moai Unity 等があります。他にも様々なフレームワークに対応していますので詳しくはTexturePackerの公式ページを参照してください。また、カスタムの書き出しフォーマットも指定可能ですので、実際どんなフレームワークであろうと対応可能です。 TexturePacker公式HP：https://www.codeandweb.com/texturepacker 今回は筆者が主にCocos2dで使用しているという都合上、勝手ながらCocos2dで使用する
萬楽破天孔
フリー素材 やさぐれひよこ素材置場 やさぐれたひよこたちの営む、やさぐれたひよことかの素材。 MMDモデル こんなん作ってます。 【ゆる～い利用規約】 ■ 利用作品公開時は、モデル作者がCarasOhmiであることを明確にしてください。 ■ 商品としての営利利用は、二次創作モデルは全面禁止、オリジナルは応相談です。 －でも、よっぽど面白そうなネタを示してもらわないと、許可しないと思います。 ■ 営利サービスでの利用も、利用者側が非営利の遊びである限りは問題ないです。 －「有料のモデルビューワーで再生する」「VR機材で表示して友達とワイワイする」ぐらいはOK －制作者の騙りや、版元との利益競合などが発生する場合は、削除申請を出します。 －対処が困難な場合は、サービスを名指しで禁止させていただく形になるので、節度を守って。 ■ MMD以外のソフトでの利用は問題ないです。 －ゲームやデスクトップ
あなたがコーディング初心者を脱する方法
比較的経験の浅めの人のHTMLとCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。 ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。 floatを覆っている要素の高さをだす 要素をfloatすると、それを覆っている要素の高さがなくなります。その高さをだす場合は以下のような方法をとります。 親要素にoverflow: hidden;を指定する 親要素にclearFixを使う 強引にheightで高さをだしている場合をよく見るのですが、その方法だと中の要素が変わるたびに指定をしなおさないといけなくなりますので、height以外の方法をとるのがオススメです。 floatを解除する方法のまとめ: 小粋空間 floatはclearする 先ほどのclearFi
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
CreateJS の SpriteSheet クラス - akihiro kamijo
CreateJS には、スプライトシートを簡単に扱えるように、SpriteSheet というクラスが提供されています。 スプライトシートは、アニメーションを構成する 1 つ以上のフレームを、1 つの画像ファイルにまとめたものです。例えば、幅と高さが 100 ピクセルのフレーム 4 つを横一列にぴったり並べると、幅が 400 ピクセル、高さが 100 ピクセルのスプライトシートになります。 スプライトシートをアニメーションとして扱うためには、SpriteSheet クラスが、「どのスプライトシートの」「どの領域を」「何番目に再生すれば良いのか」、を知らなければなりません。そのため、SpriteSheet のコンストラクタには、以下の 3 種類の情報を渡します。 スプライトシートの画像ファイル名 フレームの情報 （位置、大きさ等） フレームを再生する順序 それぞれ、複数存在する場合 （例えば
画像圧縮サイト／TinyPNG
Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。 背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール 実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr
あなたのウェブページにフラットなスタイルをさりげなく適用するPhotoshopの機能拡張 -Skeuomorphism
先日公開した「フラットなデザインを理解する上で知っておきたい5つのポイント」はデザイナーの技術的な記事でしたが、今回紹介するのはテクニックを必要とせずに、今あなたの手元にあるウェブページのデザインをフラットにするとどんな感じになるのかが分かるPhotoshopの機能です。 このまま使ってもよいし、ちょっと今風のデザインにしてみたい、フラットってどうよという人でも簡単にフラットなスタイルを体験できます。
商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009 - かちびと. net
ローカル環境にストックしていた日本国内、海外サイトで商用OKなWeb素材を配布しているサイトのリンク集が結構な量になってきたので出来る限り多くの方とシェアしたいと思ってエントリーします。 懐の広いクリエイターさん方に感謝します。このリンク集は商用サイトでも利用が可能（Commercial use）なWebサイトの素材情報です。一応確認はしていますが、ご利用の際はご自身の目で必ずライセンスや利用規約（Terms of Use等）をご確認下さい。サイトごとに利用規約も異なります。当サイトは一切の責任を負いかねます。 日本国内、及び海外の商用OKなWeb素材配布サイトと日本語で紹介された海外記事のまとめです。 2度手間を防ぐ目的でリンクにマウスオーバーすると画像をツールチップで表示するようにしました。多少表示に時間掛かるかもしれません。 写真商用サイトでも利用できるロイヤリティフリー、パブリック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
