[B! html5_canvas] mazcango2のブックマーク

「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン【増田@maskin真樹 | TechWave（テックウェーブ）

[読了時間:1分] 米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。（以下参照）上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを

mazcango2 2018/06/18

リンク

CodePen - Apple Watch Menu UI MODOKI

mazcango2 2017/01/16

リンク

HTML5 CanvasとWebGLでウェブフォントを扱う方法 - ICS MEDIA

ウェブフォントは異なる環境でもフォントの見栄えを確保する手段として、多くのウェブサイトで利用されています。ウェブフォントはCSSとしては利用しやすいものの、HTML5 CanvasやWebGLを採用した場合にCSSのように簡単に使うことができません。この記事ではインタラクションコンテンツ制作で役立つようにHTML5 CanvasとWebGLでのウェブフォントの使い方をまとめました。本記事のサンプルコードはGitHubで公開していますので、ダウンロードして読み進めてください。この記事で学べること・ウェブフォントの先読み機能を実現するJSライブラリ「WebFontLoader」の使い方・FontAwesomeをプログラムで制御する方法・HTML5 Canvasでウェブフォントを使う方法・WebGLでウェブフォントを使う方法この記事ではウェブフォントの題材として「Font Awes

mazcango2 2017/01/16

リンク

Ai->Canvas: ai ファイルを HTML5 Canvas へ変換する | DriftwoodJP

MIX Online:Ai to Canvas Plug-Inつかいかたチュートリアルの一部をCS3でやってみる。フリーのロケット画像を、SVGフォーマットでダウンロードして利用する。レイヤーの名前を「rocket();」に変更する。エクスポート機能に「Canvas（HTML）」という項が追加されているので、これで出力する。出力されたHTMLファイル3714 byte pitr_Rocket_icon.html <!DOCTYPE html>    <h

mazcango2 2016/09/23

リンク

canvas : 描画スタイルの指定（基本編） - WebOS Goodies

WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。

mazcango2 2016/09/23

html5_canvas

リンク

Canvasリファレンス

パス context . beginPath() …… 現在のパスをリセットする context . moveTo(x, y) …… 新しいサブパスの開始点を座標指定する context . closePath() …… 最終座標と開始座標を結んでパスを閉じる直線（多角形） context . lineTo(x, y) …… 直前の座標と指定座標を結ぶ直線を引くベジェ曲線 context . quadraticCurveTo(cpx, cpy, x, y) …… 2次ベジェ曲線を引く context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) …… 3次ベジェ曲線を引く円と円弧 context . arcTo(x1, y1, x2, y2, radius) …… 直前の座標と直線でつながる円弧を作成する context . arc(x,

mazcango2 2016/09/23

html5_canvas

リンク

[HTML5] Canvasで描画する際に、要素同士が重なる部分のブレンドモードを指定する - YoheiM .NET

こんにちは、@yoheiMuneです。今日は、HTML5 Canvasのブレンドモードについてブログに書きたいと思います。 Cnavasのブレンドモードとは HTML5 Canvas上に、画像・図形・文字などを描画する際に、通常は重なり合う部分は後に描画した内容が描画されると思います。例えば、以下のコードの場合は、四角形の上に丸が描画されます。 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 四角形を描画する。 ctx.fillStyle = '#cc00cc'; ctx.fillRect(canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2); ctx.fillStyle = '#ccc

mazcango2 2016/09/22

リンク

Ai->Canvas Plug-In for Adobe Illustrator

mazcango2 2016/09/22

リンク

Ai->Canvas 1.2 for Illustrator CC (and CS6)

mazcango2 2016/09/22

リンク

[HTML5]これはすごい！illustratorで描いたものをcanvas形式のコードに変換するプラグインAi to Canvas | magazine.PXROCKcom

[HTML5]これはすごい！illustratorで描いたものをcanvas形式のコードに変換するプラグインAi to Canvas これはすごい！illustratorで描いたものをcanvas形式のコードに変換するイラストレータープラグインAi to Canvasのご紹介です。 via.http://www.visitmix.com/labs/ai2canvas/index.html この「Ai to Canvas」プラグインをインストールするだけでillustratorで描かれたものをHTML5（canvas）でのコードを生成出来ます。なおこのプラグインはCS3,CS4,CS5に対応しています。使用方法「Ai to Canvas」をインストール後illustratorを起動しまずは簡単な図形を描きます。図形かなにか描けたら、「ファイル」→「書き出し」を選択します。するとファイ

mazcango2 2016/09/22

リンク

Canvasで実装するシンプルなローディング画面3パターン - Qiita

はじめに読み込みに時間が掛かるようなコンテンツの場合、エラーでは無く読み込み中ということをユーザーに伝えるため、ローディング画面（スプラッシュ画面）を用意することはよくあるかと思います。 gifアニメーションで意図を伝えるのも良いと思いますが、できることならその読み込み状況を合わせて表示させると、よりフレンドリーかと思います。今回はCanvasを使用して、シンプルな3種類のローディング画面を作成してみました。3種類とは単に思いついただけのものですが、基本的にはこれらの応用で色々なローディング画面を作成できるかと思います。実際の動きは↓ページで確認ができます http://nekoneko-wanwan.github.io/demo/canvas/loading/ 使用したライブラリ preloadJS CreateJSのモジュールの一つで、色々なファイルの読み込み率が取得可能 ※なお

mazcango2 2016/09/22

リンク

Adobe Animate CC と CreateJS の連携 (基本編) - ICS MEDIA

Adobe Animate CCからHTML5 Canvas素材として書き出し、CreateJSで利用する手順を紹介します。YouTubeのチュートリアル動画を参考に進めましょう。サンプルを再生するサンプルのソースコードを確認する 1. Adobe Animate CCを起動 Adobe Animate CCはもともとはFlashやHTML5制作のオーサリングツールです。ステージに直接グラフィックを描いたり、タイムラインを使ってモーションを作ることができます。今回はCreateJS用のグラフィックとモーションを用意したので、起動したら[新規作成]の一覧から[HTML5 Canvas]を選択します。作成したら作業用フォルダにStarAsset.flaファイルとして保存しましょう。 2. シンボルを作成する (ここでは「Star」という名前で作成) ツールの一覧から多角形ツールを選択しま