HTML5 canvas 之 小丑鱼
 |
edisonlz
2010-01-27
使用html 的新特性绘制的小丑鱼，的确很丑哦。
之前使用canvas做过复杂的应用，性能还不错 ：） 小丑鱼图片： 
<canvas> element 介绍 <canvas id="tutorial" width="150" height="150"></canvas> <canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> 创建canvas
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
页面前端代码 <body> <!-- Start Draw View Range --> <div id="placeholder" style="WIDTH: 600px; HEIGHT: 600px"></div> <!-- End Draw View Range --> </body> 页面canvas代码,支持IE版本
function constructCanvas() {
function makeCanvas(width, height) {
var c = document.createElement('canvas');
c.width = width;
c.height = height;
if ($.browser.msie) // excanvas hack
c = window.G_vmlCanvasManager.initElement(c);
return c;
}
canvasWidth = target.width();
canvasHeight = target.height();
target.html(""); // clear placeholder
if (target.css("position") == 'static')
target.css("position", "relative"); // for positioning labels and overlay
if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
if ($.browser.msie) // excanvas hack
window.G_vmlCanvasManager.init_(document); // make sure everything is setup
// the canvas
canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(target).get(0);
ctx = canvas.getContext("2d");
// overlay canvas for interactive features
overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(target).get(0);
octx = overlay.getContext("2d");
octx.stroke();
}
实例请见附件 此文章带有附件,请前往http://www.iteye.com/topic/581228下载 |
