[69-12] Canvasをサイトの背景に使おう
[69-12] Canvasをサイトの背景に使おう 最終更新日：2019年02月06日 （初回投稿日：2015年03月20日） ここまで Canvasの基本をいろいろやってみましたが、実際に「Canvasを何に使うか」を考えると、デザイナー的にはサイトの背景に使ってみたいですよね。やっぱり。 これってウィンドウサイズと Canvasサイズを一致させて、一番下に敷くことですよね。それさえできればこっちのもんだ！と試行錯誤した結果をご覧ください。 本日のINDEX Canvasのサイズをウィンドウサイズと一致させる（サンプル1） HTMLとCSSの準備 Canvasにウィンドウサイズを取得する Canvasへの描画 CanvasをjavaScriptで生成する方法（サンプル2） HTMLとCSSの準備 javaScriptで新しくCanvasとdivを作る DOMとノード 新しく作ったdivの
![[69-12] Canvasをサイトの背景に使おう](https://cdn-ak-scissors.b.st-hatena.com/image/square/9fd4d1be46d0da15be3c92c90ad3703dc1204edf/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-74.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F150117_1.jpg)
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
Canvasと戯れる 第1話「画像の切り貼りでアニメーションを作る」DevJam
今年は月1でこのブログで記事を書くことを目標にしました、新人ディベロッパーのtsukasaです。 最近ちょくちょく案件でcanvasをいじることが多いので、練習がてら小出しにプラグイン化して公開することにしました。 先日公開されたキャンペーンサイト「YOUR ANA – もっとあなたのビジネスクラスへ。」でも使われています。 第一弾はCanvasSplitMovie、CanvasFilmMovie、SimpleWinterSnowです。それぞれのプラグインはいたってシンプルな描画だけですが、cssアニメーション等と組み合わせるとそれなりに表現の幅が出るかもしれません。 CanvasSplitMovie、CanvasFilmMovieはcanvasの描画の速さを活かして、ムービーをスプライトで分割した画像を高速で描き直すことでスプリットムービーを実現しています。 また、SimpleWinte
クォータニオンによる視点の移動 （WebGL（Three.js））
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ ３次元空間中の物体を任意の軸に対して、任意の角度回転させることを考えます。 これは、コンピュータグラフィックなどの世界で、マウス操作などの入力装置を利用して３次元の物体の向きを変更させたいときに必須となります。 一般的に「回転」といえば「オイラー角」を思い浮かべるわけですが、任意の軸に対する回転は不得意であることが知られています。 それは、任意の軸に対する回転に対応する３つのオイラー角が直感的には定式化できないためです。 また、場合によってはジンバルロックと呼ばれるオイラー角を利用時に特定の条件で発生する特有の問題もあり
Three.js doc
top THREE.PerspectiveCamera File doc/three.js/src/cameras/PerspectiveCamera.js Instance Variables fov aspect near far fullWidth fullHeight x y width height projectionMatrix Superclass THREE.Camera Examples (122) doc/three.js/examples/canvas_geometry_birds.html (source) doc/three.js/examples/canvas_geometry_cube.html (source) doc/three.js/examples/canvas_geometry_earth.html (source) doc/three.js/ex
Gildas P. / WebDesign
Technicien créatif, je suis webdesigner, gamedesigner et développeur web à Rennes. Depuis [17 ans] je conçois et réalise des sites internet sur-mesure, des jeux vidéo, des œuvres interactives et des installations vidéo-ludiques. Je travaille en direct avec le client, ou en collaboration avec un réseau de graphistes, d'artistes et d'agences de communication dans toute la france et parfois à l'étran
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト2011.11.14 14:00 mayumine ｢One Milionth Tower｣は高層建築が社会に与えてきたストーリーをミニドキュメンタリーとして紹介するプロジェクト。 ｢One Milionth Tower ｣の注目すべきところは、世界初の、完全にHTML 5と WebGL、Javascriptだけで作られた、高度なインタラクティブなサイトになっているところです。 3Dのビルや写真（そして音も）のドキュメンタリーグラフィックスは、すべてWeb GL（2D/3Dグラフィックスをウェブブラウザだけで表現できるAPI）で表現されています。 さらに｢One Milionth Tower｣では、｢Popcorn｣と呼ばれる、WebのAPIとHTMLのビデオ属性を統合する特殊なJavascriptツール
FireworksからCanvasに描画するためのコマンドをβ公開。 | Yoropan blog
このFireworks PNGファイルを変換↓。 Fw to Canvas test1 – jsdo.it – share JavaScript, HTML5 and CSS iPhone、AndroidなどでCSS3で噴出しを作っていたのですが、Androidでボーダーの角丸がジャギって残念だったのでCanvasで手軽に描画したいな、ということでコマンドを書いてみました。 只今ベータ版として公開しています。フィードバックいただけるとありがたいです。 対応してるもの： ・パス形状（複合パス可） ・線（基本の角、丸どちらか、ストロークのインキの量で不透度に対応） ・塗り（ベタ塗り、グラデーションの線形・円形） ・オブジェクトの不透明度 制限： ・テキスト、ビットマップ、テクスチャ、パターン、フィルタ類、シンボル不可。 ・グループ化されているものは分解してください。長方形や、星型などのシェイプ
canvasでキラキラした背景を作る方法 - KAYAC engineers' blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なわとびプリンセスぅ
Responsive Cat
EaselJS Demo - Text Effect
Draw a Stickman
http://www.thesinglelanesuperhighway.com/
Space Noodles - spielzeugz.de canvas experiment
IDEA * IDEA