HTML 5 canvas 의 광대

2630 단어 자바C++chtml5css
html 의 새로운 특성 으로 그 려 진 어릿광대 는 정말 못 생 겼 다.
이전에 canvas 를 사용 하여 복잡 한 응용 을 한 적 이 있 는데 성능 이 괜찮다.)
어릿광대 그림:
요소 소개

 <canvas id="tutorial" width="150" height="150"></canvas>  

 <canvas id="stockGraph" width="150" height="150">  
   current stock price: $3.15 +0.15  
 </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();
        }

실례 첨부 파일 참조
Ibatis-외부 키 연결
spring-mvc 의 차단기 응용 예

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage