blog/2010-09-20

Total: 1737 / Today: 1 / Yesterday: 1

Canvasで色が変わるローディング画像を作ってみた。

ajaxによる非同期読み込みを実装して以来、こんどはajaxを読み込んでいる最中が長く感じるようになってきた。ページ切り替えてもどることを考えるとマシではあるが。だったらどうするか？描画を工夫するのが正解だろう。

そこで、[Canvas でローディングイメージ（読み込み中の画像）のアニメーションを作成する html5 の Canvas を使ってみる：第卌五回?](http://primedesignworks.blogspot.com/2010/06/html5-canvas-canvas.html)のソースコードを改良して、色が七色に変わるローディングイメージを作ってみた。七色に変わるプログラムは、RainbowManを参考にした。

ブロードバンドよりも昔の時代は、文字や背景色を変化させては喜んでいた記憶があるが、はっきりいってウザイ。しかし、こういった新技術が発表されることで再び旧来の技術が生かされるときが来るものである。これをcanvasで描画したオブジェクトに反映させることで、単純なローディング画像が少しはマシになる。

IEの場合別途Modernizrと、excanvasが必要。

サンプル： canvas.html

<!DOCTYPE html>
<html lang="ja-JP" class="no-js">
	<head>
		<meta charset="UTF-8"/>
		<script type="text/javascript" src="modernizr-1.5.min.js"></script>
		<script type="text/javascript">
//<![CDATA[

(function(){
	if (!Modernizr.canvas) {
		document.write('<script type="text/javascript" src="excanvas.compiled.js"></'+'script>');

Last Modified: 2021-11-01 16:33:48