プログラミング

Canvas と WebGL を使ったサンプルページを作りました

投稿日:2017年7月25日 更新日:

Canvas と WebGL を使ったサンプルページを作りました

1. スクリーンショット

スクリーンショット

2. デモページ

以下のURLで実際のページを見ることができます。

3. 内容

  • Canvas の方では、単純に四角形を描画するだけです。クリアすることもできます。
  • WebGL では、Three.js を使って立方体(のワイヤーフレーム)を回転させています。クリアすることもできます。

4. ソースコード

5. 参考情報

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Components

Web Components: カスタム属性の利用方法

Web Components を使ってカスタム要素を作成し、そのタグを記述する際に、独自の属性を利用する方法について説明します。

プログラミング

Rubyのように書け、Cのように速いプログラム言語 Crystal の基本的な使い方

Crystal というプログラミング言語の基本的な使い方について紹介します。 実際に「使ってみたい」「試してみたい」といった方に向けて、コードを書き始めるまでの導入方法について書きました。文法の説明な …

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …

JavaScript

JavaScriptで画面上の文字列をクリップボードにコピーする方法

目次1. はじめに2. Clipboard API and events を使う方法3. Selection API を使う方法(1) 基礎知識(2) プログラムの書き方(3) サンプルページ4. お …

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …