canvas要素の基本的な使い方まとめ
canvas要素の概観 canvas要素とは canvas要素はWEBブラウザ上(クライアントサイド)で動的にグラフィックを描くための仕組みです. もともとApple社が自社製品の機能向上を目的に, WEBブラウザSafariの独自拡張として策定したものでした. が, その利便性が認識されるとMozilla(FireFox)やOpera等のブラウザベンダーも追随するようになり, HTMLにおける事実上の標準仕様として認識されるようになりました. この流れから, HTML5ではWHATWG/W3Cによって正式に仕様として取り入れられ, 現在Internet Explorerを含むほとんどのブラウザ上でcanvas要素が利用可能です. canvas要素の役割 canvas要素はグラフィックの入出力及び分析を可能とするノードです. canvas要素に描かれたグラフィックはimg要素で表示している
当たり判定のアルゴリズム（2D 四角×四角） - Qiita
当たり判定は標準でよく入っているので、アルゴリズムまで考えたことがない人もけっこう居ると思います。今回は、ちょっと粘って原理を考えてみます。 複雑・高速なものはもっとあると思いますが、これは一番シンプルなアルゴリズムかと思います。 今回は四角 x 四角なので矩形（読みは「くけい」）とも呼ばれると思います。 ここでは矩形を「四角」と呼びます。 当たり判定に必要な情報 最初に当たり判定に使う情報をリストアップします。 ■ 中心の位置 (x,y) ■ 横幅 (width) ■ 高さ (height) これが揃ってれば当たり判定ができるよ、という話です。 まだ何も話が進んでないのでとりあえず鵜呑みでいきましょう 「横の条件」と「縦の条件」がある 図を見ておきましょう。「赤」と「青」と呼びます。 横について 1 . まず距離を出そう 位置をもとにして距離をだします。 距離 = (赤のX - 青のX)
CANVAS | 遊びと学びのヒミツ基地
開催期間：2008年10月12日（日)11:00〜17:00／ 13日（月・祝）10:00〜17:00 NPO法人CANVASと慶應義塾大学デジタルメディア・コンテンツ統合研究機構が毎年開催している、ワークショップの博覧会。 今回は、過去最大規模の全70ワークショップが集まります！大人もこどもも一緒になって楽しめる、とっておきのワークショップが集まりました。たくさんのワークショップにご参加ください！ 以下より「プレゼント抽選登録」をしていただいた方には、抽選でステキなプレゼントを差し上げます！当選結果は当日会場にて発表いたします！「ワークショップコレクション2008」のご来場前に、ぜひご登録ください。（プレゼント提供：レゴ エデュケーション） ＞＞プレゼント抽選登録はこちらから ＞＞「ワークショップコレクション2008 in慶應義塾」公式HPはこちら
Google、10代向けに「ゼロからプログラミング」ワークショップ Raspberry Piで初歩学ぶ
カリキュラム開発は、子ども向けにICTリテラシーに関するワークショップ教育を行うNPO法人CANVASが協力する。CANVASの石戸奈々子理事長は「プログラマーを育てたいわけではなく、論理的な思考や想像力、コミュニケーション能力など、情報社会を生きる上で欠かせない能力を養うひとつの手段としてプログラミングを捉えている。コンピュータ“を”使うだけでなく、コンピュータ“で”何かを作る楽しさをより多くの子どもに知ってもらいたい」と狙いを話す。 第1弾として同日、子ども向けプログラミング学習書を著書に持つ阿部和広さん（CANVASフェロー）を講師とし、広尾学園高校（東京都港区）の1年生約40人に1時間の特別授業を開講。今後はCANVASの公式サイトを通じ、全国の学校・自治体関係者からの申し込みを募る。 事業化や収益化は目的としないプロジェクトで、Raspberry Piを用いた教育プログラムの提供
Androidでゲームアプリをcanvasで作るときの注意点 | NJF
このたび「三目くらげ」というAndroidアプリのゲームを制作して公開しました。 そのときにここはポイントかなと思ったところをまとめておきます。 制作の動機など 最近はUnityやAdobe Air、html5とマルチプラットフォームな環境が人気ですが、パフォーマンスや機能的にネイティブなものが必要となることも多く、たとえばAirではActionScript Native Extensions（ANE）を使ったり、html5では表示するラッパーはjavaで作っておいて中のhtml5ページからAPIを呼び出したりとまだまだjavaは必要ですし、おそらく今後もそうでしょう。 それに他の環境で開発するにもAndroidアプリの機能やライフサイクルといった基本を押さえておく必要があり、それのは実際に作ってみるのが一番です。 また、単純に開発が無料で、html5やAirにくらべるとパフォーマンスが十
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
JavaScript HTML5 Canvas Snow in 3D – Seb Lee-Delisle
Incredibly, the early bird tickets on my HTML5/JS training course sold out in just 20 minutes today! And to celebrate I thought you might like an early Christmas present – JavaScript HTML5 canvas snow in 3D! 🙂 If you want to use this effect on your site, please feel free but PLEASE DO NOT HOTLINK TO MY FILES! Copy the files on github to your own server! I adapted one of the Mr.doob‘s three.js Par
Caat by hyperandroid
Canvas Advanced Animation Toolkit CAAT is an scene graph director-based animation framework for javascript. Based in the concept of a timeline, offers a powerful animation environment featuring: Scenes. Input abstraction, where touch, mouse, keyboard and accelerometer coexist. Screen resolution abstraction, where you can make your games up/down scale gracefully. Multi render technology, making you
Dragan Your Tree
Pure CSS Menu – light, fast, easy to make, SEO Friendly This is my favorite technique for making CSS rollover menus. Its a combination of image replacement technique, and pure CSS list menus. There is no javascript, and beneath it is valid XHTML code, so you don’t need to worry about SEO performance If your […]
HTML5 Canvas Graphs and Charts - Tutorials & Tools
HTML5 is an advanced version of the HTML language which supports audio-visual elements. This means when you use HTML5 to build your app or website, you will be able to run JavaScript as it supports it. It allows your websites or application to be more powerful and diverse. Canvas graphing is one of the major trends in the web design world today. With the use of HTML5, developers have been able to
RGraph: Beautiful JavaScript charts for websites
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website. More » RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available. More » Get the latest version of RGraph (version 6.16) from
グラフを描く
例 y = sin x のグラフです。仕組みはソースを見てください。 canvasとは canvas要素はHTML 5で描画するための新しい仕組みです。座標は左上隅が原点で，右が x，下が y の向きです。 canvasの使い方 このページの例は次のようにしています。 <head> ...(略)... <script> function draw() { const canvas = document.getElementById('MyCanvas'); const context = canvas.getContext('2d'); context.strokeRect(1, 1, 628, 200); context.beginPath(); context.moveTo(1, 101); context.lineTo(629, 101); context.stroke(); con
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building a Rock Solid Auto GridExplore a customizable CSS auto-grid layout in our latest post. Adjust column widths, gaps, and max column count for flexible web designs. Ideal for any web project. Hosting a ComfyUI Workflow via APIBasic WebSoc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
valeriobarrila.com
Ocean Wave Simulation
humble software development - home
http://www.html5canvastutorials.com/
Ben Joffe |Canvascape