忍者ブログ

Home > > canvasで虹を描いてみた

[PR]

  • 2024-04-26

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > canvasで虹を描いてみた

Home > JavaScript > canvasで虹を描いてみた

canvasで虹を描いてみた

Share on Tumblr このエントリーをはてなブックマークに追加

引き続きuupaa-excanvas.jsをいじって遊んでます。

グラデーションがかなり綺麗にできるっぽかったので、試しに虹を作ってみる。
結果がこれ↓



予想以上にうまくいったので、bornneet.comの背景（？）として使うことにしました。

ソースは以下のような感じ。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>rainvow</title>
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	
	<script type="text/xaml" id="xaml"><?xml version="1.0"?><Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-color.js/uupaa-color.mini.js"></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/uupaa-excanvas.js"></script>

	<!--[if lt IE 7]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
	<![endif]-->

	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<!-- cssでのサイズ指定はうまくいかない（？）ので属性で指定  -->	
	<canvas width="200" height="200"></canvas>
	<div id="test"></div>
</body>
</html>

js

uuClass.Canvas.ready(function() {

	var canvas = document.getElementsByTagName('canvas')[0];
	var ctx = canvas.getContext('2d');

	var r = canvas.width;
	var x = canvas.width;
	var y = canvas.height;

	var grd = ctx.createRadialGradient(x, y, 1, x, y, r);

	var colors = ['255,255,255', '255,0,0', '255,165,0', '255,255,0', '0,255,0', '0,0,255', '0,0,128', '128,0,128', '255,255,255'];

	var margin = 0.05;
	var base = 1 - margin * colors.length;

	for(var i = 0; i < colors.length; i++) {
		grd.addColorStop(base, 'rgba(' + colors[i] + ',0.6)');
		base += margin;
	}

	ctx.fillStyle = grd;
	ctx.fillRect(x - r, y - r, r * 2, r * 2);

});

css

@charset "UTF-8";

canvas {
	border: 1px solid black;
	position: fixed;
	right: 0;
	bottom: 0;
}

ちなみに、ExplorerCanvasでやると、



こうなっちゃうので円形グラデーションを使う時は注意。
（Canvas - 円形グラデーションを指定する - HTML5.JP）

PR

Comments:0

Comment Form

Trackback+Pingback:

TrackBack URL for this entry
Listed below are links to weblogs that reference
canvasで虹を描いてみた from Born Neet

Home > JavaScript > canvasで虹を描いてみた

About

プロフィール画像

Author: tnantoka

@tnantoka

Calendar
« 2024 04 »
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Recent Entries
Categories
Archives
Recent Comments
Recent Trackback
Search
Loading
Feeds
Links
スポンサードリンク

Page Top