リストのアイコンをcanvasで作ってみた

つまらないものですが申し訳ないですが、今回はおもいきってjsdo.itというサイトに登録してみました。すごく便利ですね！

html

この通り何のへんてつもないリストがあります。
canvasタグはjQueryで追加します。

html

 
	<ul class="icon">
		<li>item01</li>
		<li>item02</li>
		<li>item03</li>
		<li>item04</li>
		<li>item05</li>
	</ul>
	

css

リストの画像は普通cssの背景画像で指定しますが、背景画像にcanvasはたぶん指定できませんので、liの直下にcanvasを入れます。
細かい調整はcanvasのtopやleftで修正してください。

css

 
	ul.icon {
		list-style: none;
	}
	ul.icon li {
		position: relative;
		margin-bottom: 0.5em;
	}
	ul.icon li canvas {
		position: absolute;
		top: 0.3em;
		left: -13px;
	}
	

JavaScript

要素の取得とかにjQueryを使用しております。

javascript

 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		var list = $('ul.icon li');
		list.prepend('<canvas width="20" height="20" />');
		var ctx = null;
		
		list.each(function (i) {
			var canvas = $('canvas', list).get(i);
			ctx = canvas.getContext('2d');
			drawIcon();
		});
		
		/* アイコン描画
		================ */
		function drawIcon() {
			//丸
			ctx.beginPath();
			ctx.arc(6, 10, 6, 0, Math.PI*2);
			ctx.fillStyle = 'rgb(50, 150, 255)';
			ctx.fill();
			//三角
			ctx.beginPath();
			ctx.moveTo(5, 7);
			ctx.lineTo(8, 9);
			ctx.lineTo(5, 12);
			ctx.closePath();
			ctx.fillStyle = 'rgb(255, 255, 255)';
			ctx.fill();
		}
	});
	</script>
	

アイコンを描いているのは16行目あたりの「drawIcon」ですので、ここをカスタマイズすることでオリジナルのアイコンにできます。