Scribd Logo
Upload

Welcome to Scribd!

  • Canvas 3

    Uploaded by

    usr128
    8 views2 pages
    This document contains the HTML and JavaScript code to dynamically draw a logo containing the word "HTML" and the number 5 using different shapes and colors on a canvas element. When the page loads, the init() function gets the canvas context and calls the dologo() function to initially draw the logo. The dologo() function draws the various paths and fills for the logo elements. The changescale() function allows dynamically scaling the logo by changing the factorvalue and redrawing with dologo().

    Original Description:

    html5 canvas sample script

    Original Title

    canvas_3

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the HTML and JavaScript code to dynamically draw a logo containing the word "HTML" and the number 5 using different shapes and colors on a canvas element. When the page loads, the init() function gets the canvas context and calls the dologo() function to initially draw the logo. The dologo() function draws the various paths and fills for the logo elements. The changescale() function allows dynamically scaling the logo by changing the factorvalue and redrawing with dologo().

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    8 views2 pages

    Canvas 3

    Uploaded by

    usr128
    This document contains the HTML and JavaScript code to dynamically draw a logo containing the word "HTML" and the number 5 using different shapes and colors on a canvas element. When the page loads, the init() function gets the canvas context and calls the dologo() function to initially draw the logo. The dologo() function draws the various paths and fills for the logo elements. The changescale() function allows dynamically scaling the logo by changing the factorvalue and redrawing with dologo().

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 2

    Tuesday, October 14, 2014

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65

    <html>
    <head>
    <title> Logo HTML 5 </title>
    <script language="JavaScript">
    var ctx;
    var factorvalue = 1;
    var fontfamily = "65px 'Verdana',Sans-Serif";
    function init() {
    ctx = document.getElementById('bikinLogo').getContext("2d");
    ctx.font = fontfamily;
    ctx.save();
    dologo();
    }
    function dologo() {
    var offsety = 80;
    ctx.restore();
    ctx.save();
    ctx.clearRect(0,0,600,400);
    ctx.scale(factorvalue,factorvalue);
    ctx.fillText("HTML",31,60);
    ctx.translate(0,offsety);
    ctx.fillStyle = "#e34c26"; // objek utama segi lima orange
    ctx.beginPath();
    ctx.moveTo(39,250);
    ctx.lineTo(17,0);
    ctx.lineTo(262,0);
    ctx.lineTo(239,250);
    ctx.lineTo(139,278);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = "#f06529"; // objek sebelah kanan orange muda
    ctx.beginPath();
    ctx.moveTo(139,257);
    ctx.lineTo(220,234);
    ctx.lineTo(239,20);
    ctx.lineTo(139,20);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = "#ebebeb"; // teks angka 5 sebelah kiri
    ctx.beginPath();
    ctx.moveTo(139,113);
    ctx.lineTo(98,113);
    ctx.lineTo(96,82);
    ctx.lineTo(139,82);
    ctx.lineTo(139,51);
    ctx.lineTo(62,51);
    ctx.lineTo(70,144);
    ctx.lineTo(139,144);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(139,193);
    ctx.lineTo(105,184);
    ctx.lineTo(103,159);
    ctx.lineTo(72,159);
    ctx.lineTo(76,207);
    ctx.lineTo(139,225);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = "#ffffff"; // teks angka 5 sebelah kanan
    ctx.beginPath();
    ctx.moveTo(139,113);
    ctx.lineTo(139,144);
    ctx.lineTo(177,144);
    ctx.lineTo(173,184);
    -1-

    Tuesday, October 14, 2014

    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92

    ctx.lineTo(139,193);
    ctx.lineTo(139,225);
    ctx.lineTo(202,207);
    ctx.lineTo(210,113);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(139,51);
    ctx.lineTo(139,82);
    ctx.lineTo(213,82);
    ctx.lineTo(216,51);
    ctx.closePath();
    ctx.fill();
    }
    function changescale(val) {
    factorvalue = val / 100;
    dologo();
    }
    </script> </head>
    <body onLoad = "init();">
    <canvas id="bikinLogo" width="600" height="400"> </canvas>
    <article>
    skala:
    <input id="slide" type="range" min="0" max="100" value="100" onChange=
    "changescale(this.value)" step="10">
    </article>
    </body>
    </html>

    -2-

    You might also like