[B! Javascript][canvas] battaのブックマーク

Canvasで桜を降らせてみました - 株式会社オーツー｜スタッフブログ

はじめまして、WEBプログラマーの佐野と申します。少し前ですが、NTTソルマーレ株式会社様の海外向けゲームアプリ「Moe! Ninja Girls」の公式サイト制作をさせていただきました！ ※サーバーが海外にあるため、読み込みに時間がかかります。 ※日本での配信はしておりません。その中で、HTML5のCanvasを使って桜を降らせるアニメーションを作成しましたので、完成までの手順をSTEPに分けて共有させていただきたいと思います。こちらが今回作成したサンプルの完成形です。【2017/02/13追記】ブログの最後に、今回のサンプル使ってWEBチームで１つ作品を作ってみました。サンプルと違い、かなり豪華なものになってますので、ぜひ最後まで見ていただければと思います。 Step1:画像を表示して上から下に動かすまずは画像の表示と画像を上から下に動かすところまでやってみました。 S

batta 2022/11/30

リンク

canvas-confetti

Demo catdad.github.io/canvas-confetti Install You can install this module as a component from NPM: You can then require('canvas-confetti'); to use it in your project build. Note: this is a client component, and will not run in Node. You will need to build your project with something like webpack in order to use this. You can also include this library in your HTML page directly from a CDN: Note: yo

batta 2021/11/10

リンク

Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG

Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG What is Zdog? Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special. Zdog is small. 2,100 lines of code for the entire library. 28KB minified. Zdo

batta 2019/05/31

リンク

[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js

スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ

batta 2016/01/20

リンク

ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu

batta 2013/08/21

リンク

Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。デザイナーのハルエです。最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。そこで見つけたのがこれ。「Chart.js」。めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、

batta 2013/07/17

リンク

EaselJSのTextクラスで作成したテキストの幅と高さを取得する | WebDelog

EaselJSのTextクラスは、 var text = new createjs.Text("Hello World", "60px Arial", "#ffffff") のように、第一引数に表示させたい文字、第二引数にフォントのスタイル、第三引数にフォントの色を指定することでインスタンスを作成することができます。今回はこのテキストの幅と高さを取得してみたいと思います。テキストの領域を取得することで、 cacheメソッドを利用するときや、背景にシェイプなどを敷いてボタンのようなものを作成するとき、画面の中央に表示させる計算を行うときなどに役に立ちます。 getMeasuredWidth, getMeasuredHeight 幅と高さはTextクラスのインスタンスから、 getMeasuredWidthメソッドとgetMeasuredHeightを呼び出すだけ

batta 2013/05/18

リンク

HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA

HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会（第2回）で発表したWebサイト「日本全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現スマートフォンやタブレットでも閲覧可能このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ