Tuesday, August 28, 2012

HTML5 Canvas: Basic functions


Introduction

Canvas is a new element in HTML5 used to draw graphics, on the fly, on a web page. This post shows some basic functions of canvas including draw line, draw rect, draw circle, bezier curve, quadratic curve, image and text.

The Program:

<html>
    <head>
        <style>
            #testCanvas {
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 2;
            }
            #tmpCanvas {
                position: absolute;
                left: 0px;
                top: 0px;
                z-index: 1;
            }
            #controls {
                position: absolute;
                left: 600px;
                top: 0px;
                width: 200px;
                height: 800px;
            }
        </style>
        <script type="text/javascript">
                
            function drawLine () {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                ctx.strokeStyle = '#AAAAAA'; // line color
                ctx.lineWidth = 3; // line width
                ctx.beginPath(); // start
                ctx.moveTo(3, 3); // start point
                ctx.lineTo(40, 20); // end point
                ctx.stroke(); // draw line
            }
            function drawRect () {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                ctx.fillStyle = 'rgba(54, 76, 175, 0.6)'; // fill style
                ctx.strokeStyle = '#AAAAAA'; // line color
                ctx.lineWidth = 3; // line width
                ctx.fillRect(30, 30, 80, 80); // start x, start y, width, height
                ctx.strokeRect(30, 30, 80, 80);
            }
            function drawCircle () {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                ctx.fillStyle = 'rgba(254, 76, 175, 0.6)'; // fill style
                ctx.strokeStyle = '#AAAAAA'; // line color
                ctx.beginPath();
                ctx.arc(300, 300, 100, // center x, center y, radius
                        0 * Math.PI, 2 * Math.PI, // start, finish, change the two values to draw a part of circle
                        false); // drawing direction, true: anticlockwise, false: clockwise
                ctx.fill();
                ctx.lineWidth = 5;
                ctx.strokeStyle = "black";
                ctx.stroke();
            }
            function drawBezierCircle () {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                ctx.fillStyle = 'rgba(254, 76, 175, 0.6)'; // fill style
                ctx.strokeStyle = '#AAAAAA'; // line color
                ctx.lineWidth = 3; // line width
                ctx.beginPath();
                ctx.moveTo(50, 50); // start x, start y
                ctx.bezierCurveTo(95, 80, 95, 110, 50, 140); // cp1 x, cp1 y, cp2 x, cp2 y, end x, end y
                                                            // where cp denotes control point
                ctx.bezierCurveTo(5, 110, 5, 80, 50, 50);

                ctx.fill();
                ctx.stroke();
            }

            function drawQuadraticCircle () {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                ctx.fillStyle = 'rgba(54, 236, 175, 0.3)'; // fill style
                ctx.strokeStyle = '#AAAAAA'; // line color
                ctx.lineWidth = 3; // line width
                ctx.beginPath();
                ctx.moveTo(120, 120); // start x, start y
                ctx.quadraticCurveTo(145, 125, 150, 150); // cp x, cp y, end x, end y
                ctx.quadraticCurveTo(145, 175, 120, 180);
                ctx.quadraticCurveTo(95, 175, 90, 150);
                ctx.quadraticCurveTo(95, 125, 120, 120);

                ctx.fill();
                ctx.stroke();
            }
            function loadImage() {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                var img = new Image();
                img.src = 'imgs/test.png';
                img.onload = function(){
                    ctx.drawImage(img, 200, 200, 300, 200); // x, y, width, height
                }
            }
            function loadCropedImage () {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                var img = new Image();
                img.src = 'imgs/test.png';
                img.onload = function(){
                    ctx.drawImage(img, 90, 0, 500, 550, // crop area: start x, start y, width, height
                                    200, 200, 300, 200); // display area: x, y, width, height
                }
            }
            function showText () {
                var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
                ctx.font = '60pt Calibri'; // font, size and family
                ctx.fillStyle = 'rgba(254, 76, 175, 0.6)'; // fill style
                ctx.strokeStyle = 'blue'; // line color
                ctx.lineWidth = 3; // stroke size
                ctx.fillText("test text", 100, 400); // fill the text: text, x, y
                ctx.strokeText("test text", 100, 400); // stroke the text: text, x, y
            }
            function getCanvas (id) {
                var canvas = document.getElementById(id);
                if (canvas && canvas.getContext)
                    return canvas;
                return null;
            }

        </script>
    </head>

    <body>
        <canvas id="testCanvas" height="500px" width="500px" style="border: 1px solid #3648AE;">
            current browser does not support canvas
        </canvas>
        
        <div id="controls">
            <button onclick="drawLine();">draw line</button>
            <button onclick="drawRect();">draw rect</button>
            <button onclick="drawCircle();">draw circle</button>
            <button onclick="drawBezierCircle();">draw bezier circle</button>
            <button onclick="drawQuadraticCircle();">draw quadratic circle</button>
            <button onclick="loadImage();">load image</button>
            <button onclick="loadCropedImage();">load a part of image</button>
            <button onclick="showText();">show text &quot;test text&quot;</button>
        </div>
    </body>

</html>


Download:

https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/Html5/Canvas/basic_canvas_test.html

References: 

http://www.tutorialspoint.com/html5/html5_canvas.htm
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

No comments:

Post a Comment