`

HTML5 canvas 之 小丑鱼

HTML5CSSJavaCC++ 
阅读更多
使用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();
        }





实例请见附件
分享到：
| ruby socket 之 ftp
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics