使用html 的新特性绘制的小丑鱼,的确很丑哦。
之前使用canvas做过复杂的应用,性能还不错 :)
小丑鱼图片:
<canvas> element 介绍
创建canvas
页面前端代码
页面canvas代码,支持IE版本
之前使用canvas做过复杂的应用,性能还不错 :)
小丑鱼图片:
![](http://dl.iteye.com/upload/picture/pic/53845/4c2bed52-7553-3816-8ecb-953d2ce6529d-thumb.png)
<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();
- }