浏览 2755 次
|
锁定老帖子 主题：HTML5 canvas 之 小丑鱼
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-27
最后修改：2010-01-28
使用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();
}
实例请见附件 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
