このアニメ画像は、W3Cのウェブサイトに掲載されているCanvasによる作成例です。
HTMLの<canvas>要素とスクリプトだけで作成されており、 Flashなどのプラグインや画像は一切使用されていません。
HTMLソースは http://www.htmq.com/canvas/001.shtml から貰ってきた。
Canvas画像は、当初は「前の記事」などの下段の「カスタムフィールド」に表示されており、また、
個別ページを開かないと動作しなかったが、index.phpおよびstyle.cssを編集することにより、
記事と一体化し、記事一覧画面でも動作するようになった。
index.phpの編集要点は、?php the_content(); ? ?php the_meta(); ? p class=”postinfo”と、
?php the_meta(); ? を p class・・の前に置いたこと。
style.cssの要点は、次のようにpost-meta-・・をdiv.postにまとめたこと。
div.postという書き方は間違っているかも。
div.post post-meta-key {text-align: center;color: red; font-weight: bold; font-size: 50%;}
div.post post-meta {font-variant: small-caps; color: blue; clear: both;}
なお、プラグインは使用しておらず、HTMLソースはカスタムフィールドの値として記載している。
- Lart: <!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pretty Glowing Lines</title>
</head>
<body>
<canvas width="450" height="250"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>
</body>
</html>
2012年5月14日 11:37 AM |
カテゴリー：習作HTML5 |
コメント（0）
