html5 canvas 里边绘制标题和阴影

2012-12-29

html5 canvas 里面绘制标题和阴影!DOCTYPE htmlhtml headscriptfunction createCanopyPath(conte

html5 canvas 里面绘制标题和阴影
<!DOCTYPE html>
<html>
<head>
   <script>

     function createCanopyPath(context)
     {
        context.beginPath();

        context.moveTo(-25,-50);
        context.lineTo(-10,-80);
        context.lineTo(-20,-80);
        context.lineTo(-5,-110);
        context.lineTo(-15,-110);

        context.lineTo(0,-140);

        context.lineTo(15,-110);
        context.lineTo(5,-110);
        context.lineTo(20,-80);
        context.lineTo(10,-80);
        context.lineTo(25,-50);

        context.closePath();
     }

     function drawTrails()
     {
        var canvas=document.getElementById('diagonal');
        var context=canvas.getContext('2d');

        context.save();
        context.translate(130,250);
        //绘制树冠函数
        createCanopyPath(context);
        //填充树冠颜色
        context.lineWidth=4;
        context.lineJoin='round';
        context.strokeStyle='#663300';
        context.fillStyle='#339900';
        context.fill();

        //渐变
        var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
        trunkGradient.addColorStop(0,'#663300');
        trunkGradient.addColorStop(0.4,'#996600');
        trunkGradient.addColorStop(1,'#552200');
        //树干
        //context.fillStyle='#663300';
        context.fillStyle=trunkGradient;
        context.fillRect(-5,-50,10,50);
        var canopyShadow=context.createLinearGradient(0,-50,0,0);
        canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
        canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');
        context.fillStyle=canopyShadow;
        context.fillRect(-5,-50,10,50);

        context.stroke();
        context.restore();
        //路，两条曲线
        context.save();

        context.translate(-10,350);
        context.beginPath();
        context.moveTo(0,0);
        context.quadraticCurveTo(170,-50,260,-190);
        context.quadraticCurveTo(310,-250,410,-250);
        context.strokeStyle='#663300';
        context.lineWidth=20;
        context.stroke();
        context.restore();
         //阴影！！！！
        //context.save();
        //context.transform(1,0,-0.5,1,0,0);
        //context.scale(1,0.6);
        //context.fillStyle='rgba(0,0,0,0.2)';
        //context.fillRect(-5,-10,10,50);
        //createCanopyPath(context);
        //context.fill();
        //context.rotate(1.57);
        //context.drawImage(myImage,0,0,100,100);
        //context.stroke();
        //content.restore();
        //标题
        content.save();

        context.font="60px impact";
        context.fillStyle='#996600';
        context.textAlign='center';
        context.fillText('Happy Trails!',200,60,400);

        context.stroke();
        content.restore();
     }
     window.addEventListener("load",drawTrails,true);
   </script>
</head>
<body>
   <canvas id="diagonal" width="800px" height="800px">
   </canvas>
<body>
</html>
阴影也不出来不知道是不是rotate没起作用？还有标题不出字啊
[解决办法]
<!DOCTYPE html>
<html>
  <head>
    <script>

      function createCanopyPath(context)
      {
         context.beginPath();

         context.moveTo(-25,-50);
         context.lineTo(-10,-80);
         context.lineTo(-20,-80);
         context.lineTo(-5,-110);
         context.lineTo(-15,-110);

        context.lineTo(0,-140);

        context.lineTo(15,-110);
         context.lineTo(5,-110);

         context.lineTo(20,-80);
         context.lineTo(10,-80);
         context.lineTo(25,-50);

         context.closePath();
      }

      function drawTrails()
      {
         var canvas=document.getElementById('diagonal');
         var context=canvas.getContext('2d');

         context.save();
         context.translate(130,250);
         //绘制树冠函数
         createCanopyPath(context);
         //填充树冠颜色
         context.lineWidth=4;
         context.lineJoin='round';
         context.strokeStyle='#663300';
         context.fillStyle='#339900';
         context.fill();

        //渐变
         var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
         trunkGradient.addColorStop(0,'#663300');
         trunkGradient.addColorStop(0.4,'#996600');
         trunkGradient.addColorStop(1,'#552200');
         //树干
         //context.fillStyle='#663300';
         context.fillStyle=trunkGradient;
         context.fillRect(-5,-50,10,50);
         var canopyShadow=context.createLinearGradient(0,-50,0,0);
         canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
         canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');
         context.fillStyle=canopyShadow;
         context.fillRect(-5,-50,10,50);

        context.stroke();
         context.restore();
         //路，两条曲线
         context.save();
         context.translate(-10,350);
         context.beginPath();
         context.moveTo(0,0);
         context.quadraticCurveTo(170,-50,260,-190);
         context.quadraticCurveTo(310,-250,410,-250);
         context.strokeStyle='#663300';
         context.lineWidth=20;
         context.stroke();
         context.restore();

//         context.save();
//         context.rotate(1.57);
//         context.drawImage(myImage,0,0,100,100);
//         context.restore();
//          //阴影！！！！
//         context.save();
//         context.transform(1,0,-0.5,1,0,0);
//         context.scale(1,0.6);
//         context.fillStyle='rgba(0,0,0,0.2)';
//         context.fillRect(-5,-50,10,50);
//         createCanopyPath(context);
//         context.fill();

         //标题
         context.save();
         context.shadowColor='rgba(0,0,0,0.2)';
         context.shadowOffsetX=15;
         context.shadowOffsetY=-10;
         context.shadowBlur=2;
         context.font="60px impact";
         context.fillStyle='#996600';
         context.textAlign='center';
         context.fillText('Happy Trails!',200,60,400);
         context.restore();
      }
      window.addEventListener("load",drawTrails,true);
    </script>
  </head>
  <body>
    <canvas id="diagonal" width="800px" height="800px">
    </canvas>
  <body>
</html>
文字和阴影显示出来了

热点排行

CSS

html5 canvas 里边绘制标题 和阴影

html5 canvas 里边绘制标题和阴影