HTML5 Game - Canvas Shape logo gradient

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Logo

Description

logo gradient

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas id="logo" width="900" height="80">
      <h1>AwesomeCo</h1>
    </canvas>
    //from w ww.j  a va  2  s .  c o  m
    <script>
      let drawLogo = function(){
        let canvas = document.getElementById("logo");
        let context = canvas.getContext("2d");
        
        let gradient = context.createLinearGradient(0, 0, 0, 40);
        gradient.addColorStop(0,   "blue"); 
        gradient.addColorStop(1,   "#FF0000");
        context.fillStyle = gradient;
        context.strokeStyle = gradient;
      
        context.font = "italic 40px 'Arial'";
        context.fillText("java2s.com", 60, 36);
      
         context.lineWidth = 2;
         context.beginPath();
         context.moveTo(0, 40); 
         context.lineTo(30, 0);
         context.lineTo(285, 40 );
         context.stroke();
         context.closePath();
              
         context.save();
         context.translate(20,20);
         context.fillRect(0,0,20,20);
         
         
         context.fillStyle    = "#fff";
         context.strokeStyle = "red";
                  
         context.lineWidth = 2;
         context.beginPath();
         context.moveTo(0, 20); 
         context.lineTo(10, 0);
         context.lineTo(0, 20 );
         context.fill();
         context.closePath();
         context.restore();
         
        
     };
     let canvas = document.getElementById("logo");
     
     let G_vmlCanvasManager; // so non-IE browsers won't error
     if (G_vmlCanvasManager != undefined) { // IE 8
       G_vmlCanvasManager.initElement(canvas);
     }
     if (canvas.getContext){
       drawLogo();
     }
     </script>
  </body>
</html>

Related Topic