Draw titles and shadows in html5 canvas_html/css

Table of Contents

回复讨论(解决方案)

Home

Web Front-end

HTML Tutorial

Draw titles and shadows in html5 canvas_html/css_WEB-ITnose

Jun 24, 2016 pm 12:16 PM

<!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>
文字和阴影显示出来了

<!DOCTYPE html>
<html>
  <head>
    <script>

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

         context.moveTo(-25,-50);
         conte…… 我试试啊·

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn