HTML5 canvas 之小丑鱼

edisonlz

浏览: 159848 次
性别:
来自: 北京

最近访客更多访客>>

iyellow

Keiver

s_z1212

wangwenhao00

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 CSS Java C C++

使用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();
        }

实例请见附件

fish.rar (22.4 KB)
下载次数: 146

分享到：

面试题 - 总结 | ruby socket 之 ftp

2010-01-27 15:28
浏览 1263
评论(0)
论坛回复 / 浏览 (0 / 2754)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 canvas 之小丑鱼

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 canvas 之 小丑鱼

评论

发表评论

相关推荐

最近访客更多访客>>

HTML5 canvas 之小丑鱼