canvas

トナカイと白ひげのおじいさんに学ぶUVアニメーション

この記事はTech KAYAC Advent Calendar 2021の24日目の記事です。こんにちは!意匠部のおばらです。今日はUVアニメーションのお話です。UVとは?3Dの世界でUVといえばUV座標のことです。UV座標は頂点の3次元座標がテクスチャ上のどの位置に対応するかを表す2…

【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法

この記事は Tech KAYAC Advent Calendar 2021 の21日目の記事です。 こんにちは!意匠部のおばらです。 今回は アドベントカレンダー14日目の記事 でご紹介した 「すき焼きの写真にすき焼きの3Dモデルなど任意のファイルをバイナリとして埋め込む方法」 の解…

すき焼きの写真にすき焼きの3Dモデルを埋め込む方法

この記事は Tech KAYAC Advent Calendar 2021の14日目の記事です。 こんにちは!意匠部のおばらです。 今日は、知っていても役に立たないかもしれない、 WEBページでの画像の変な使い方をご紹介しようと思います。 題して「すき焼きの写真にすき焼きの3Dモデ…

動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう

こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出…

svg / canvas出力ができるbodymovinの紹介

やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で1番プログラムできないおじさんの町田(@machida-yousuke)と申します。 今回は、「映像業界?フロントエンド業界?が注目しているオープンソースライブラリ bodymovin…

触れるミュージックビデオ!? インライン動画再生のはなし

インライン動画再生という技術について、その仕組みや使い所を解説しています。

ブラウザ上で動作するjavascriptエディターの比較

衣替えしました。agoです。 最近使い始めて便利だなーと思ったので、ブラウザ上から入力されたjavascriptを実行してくれるオンラインjavascriptエディターを比較したいと思います。 jsdo.it http://jsdo.it/ 弊社運営のwonderflのJS版サイトです。 使い方 コ…

canvasをバイト単位で修正する方法(ImageDataの使い方)

引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに? canvas内のバイト列を扱うためのObjectです。 canvas内の…

canvasでキラキラした背景を作る方法

tech.kayac.com、ささやかにリニューアルしました! tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が?って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcan…

今更聞けないcanvasの基礎の基礎

はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね!」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Fir…

JavaScriptで画像のオフラインキャッシュを実装する

もうすぐクリスマスシーズンなんですかね?本間です。 巷で話題のイケメンホイホイ(以下イケホイ)ですが、このたびiPhone用サイトがオープンしました。 それにあわせて新機能も搭載!イケメン写真にタグを付ける機能と、iPhoneでぼんやり眺めているだけで…