みなさん、こんばんは。ASCII（週刊アスキー＋ASCII.jp）の吉田ヒロでございます。本日は、先ほどアップデートがかかったアドビ システムズのウェブ系開発ツールをご紹介したいと思います。アドビのウェブ開発ツールとしては、コードを書かずにサイトデザインが可能な「Muse CC」、コード編集を伴う高度なウェブサイト構築が可能な「Dreamweaver CC」、ウェブ用のインタラクティブコンテンツの制作が可能な「Animate CC」の3つがあります。 今回、アップデートされるのは、Muse CCとAnimate CCの2製品。多くのみなさんが聞き慣れないかと思いますが、Animate CCというのは元Flash Professionalのことです。ASCII読者なら、一時は一世を風靡したFlashの現状をご存じかと思いますが、いちおう変遷を説明しておきます。 2000年代中盤まで、Flas
２年近く前にCanvas APIの実装状況を網羅的に調査したことがありますが、ブラウザごとに実装がいろいろ異なっていていました。その中で一番目立ったのがarcTo関数の実装の違いです。改めて調べてみました。 ブラウザのバージョンは以下です。 Chrome Safari Opera Firefox 4.0.249.43 4.0.4(531.21.10) 10.10 3.5.7 IEはExplorerCanvas r3を見てみましたがarcToは実装されていませんでした。 テストケース 今回、新たに簡単なテストケースを作りました。左図のような絵を描画するものです。arcToだけを使って描画しています。ちょっとキモイ絵になってしまいした。 Chromeではこうなります まあまあですが、描かれるべき線と左目の点がありません。 左目の点がないのは、arcToの問題もありますが、さらに長さゼロの線に対
はじめに 前回のエントリ「HTML5 Canvas のarcTo関数の実装が未だにorz」で書いたCanvasのarcToですが、これをarcで実装してみました。CanvasのarcTo関数は左図のように３点A, B, Cが与えられたとき、その２本の半直線に接する半径Ｒの円弧を描画するものです。 結果のJavaScriptプログラムは非常にシンプルになりましたが、そこに到るステップはちょっと面倒でした。今回のエントリーは高校の数学の復習的な内容になっています。昔を思い出して紙と鉛筆だけの手計算をしました。 ２本の直線に接する円を求める arcToを実装するポイントは下記の問題を解くことです。 平行ではない２本の直線に接する半径Rの円の中心と２つの接点の座標を求めよ。 ２本の直線に接する円は左図のように４つ存在します。ここでは途中の計算を簡単にするため、２の直線は原点を通り傾きが無限大でない
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
HTML5+Canvasでパーティクルっぽいのを作ってみる HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 投稿日2015年07月16日 更新日2019年04月13日 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成します。
概説 HTML5のcanvas内に1枚の画像を表示するのは簡単です。 複数の画像を表示するのも結構簡単なのですが、これを任意の順序で表示しようとするとちょっと工夫が必要でした。 まずは1枚の画像を表示してみます。 <body> <canvas id="canvas" width="600" height="400"></canvas> <script> (function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var image = new Image(); image.src = '1.png'; image.addEventListener('load', function() { context.drawImage(image, 0, 0,
概説 「HTML5のcanvas内に複数の画像を任意の順序で表示する」で描画したcanvas内の画像をドラッグ＆ドロップしたい欲が湧いたので、コードを書いてみました。 ドラッグ＆ドロップは通常のDOMであれば、HTML5のDrag & Drop APIを利用することで簡単に対応可能です。 しかし、canvasに一度描いてしまったオブジェクトは、DOMとして操作することができないため、座標を考慮した地味な実装が必要になります。 以下のようなサイトを参考にしながら、画像の重なり順と当たり判定を考えてやってみたところ、自分が「いかに座標に弱いか」ということがよく分かりました。。。 A Gentle Introduction to Making HTML5 Canvas Interactive dragging and resizing an image on html5 canvas 「Kine
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
2. 2 Broadtail Confidential Confidential2 • このスライドは、 Chrome+HTML5 Developers Live Japan #5 にて使用予定のスライドです。 • 以下のURLからライブの様子をご覧いただけます – https://plus.google.com/events/cmmlimc40bamuk1la1qjgk2unh8 – ライブコーディング等を予定しておりますので、是非実際 の映像と共にお楽しみいただければと思います。 ネットでこのスライドを見ている方へ 3. 3 Broadtail Confidential Confidential3 • 紀平 拓男（きひら たくお） – 株式会社ディー・エヌ・エー – @tkihira – DeNAにおいてHTML5の総括を担う • 会社を2つ設立したシリアルアントレプレナー • HTM
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
canvasで描いた画像をローカルに保存する方法