HTML5 canvas 之小丑鱼

来源：互联网发布：车管家软件是什么编辑：程序博客网时间：2024/05/15 21:57

HTML5CSSJavaCC++

使用html 的新特性绘制的小丑鱼，的确很丑哦。
之前使用canvas做过复杂的应用，性能还不错：）

小丑鱼图片：

<canvas> element 介绍

Java代码  
<canvas id="tutorial" width="150" height="150"></canvas>    
  
<canvas id="stockGraph" width="150" height="150">    
  current stock price: $3.15 +0.15    
</canvas>  

创建canvas

Java代码  
var canvas = document.getElementById('tutorial');    
var ctx = canvas.getContext('2d');    

页面前端代码

Java代码  
<body>  
<!-- Start Draw View Range -->  
<div id="placeholder" style="WIDTH: 600px; HEIGHT: 600px"></div>  
<!-- End Draw View Range -->  
</body>  

页面canvas代码,支持IE版本

Java代码  
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();  
        }  
      

HTML5 canvas 之 小丑鱼

HTML5 canvas 之小丑鱼