Draw titles and shadows in html5 canvas_html/css_WEB-ITnose

 
   <script> <br>      <br>      function createCanopyPath(context) <br>      {  <br>         context.beginPath(); <br>          <br>         context.moveTo(-25,-50); <br>         context.lineTo(-10,-80); <br>         context.lineTo(-20,-80); <br>         context.lineTo(-5,-110); <br>         context.lineTo(-15,-110); <br> <br>         context.lineTo(0,-140); <br> <br>         context.lineTo(15,-110); <br>         context.lineTo(5,-110); <br>         context.lineTo(20,-80); <br>         context.lineTo(10,-80); <br>         context.lineTo(25,-50); <br>      <br>         context.closePath(); <br>      } <br>      <br>      function drawTrails() <br>      { <br>         var canvas=document.getElementById('diagonal'); <br>         var context=canvas.getContext('2d'); <br>          <br>         context.save(); <br>         context.translate(130,250); <br>         //绘制树冠函数 <br>         createCanopyPath(context); <br>         //填充树冠颜色 <br>         context.lineWidth=4; <br>         context.lineJoin='round'; <br>         context.strokeStyle='#663300'; <br>         context.fillStyle='#339900'; <br>         context.fill(); <br> <br>         //渐变 <br>         var trunkGradient=context.createLinearGradient(-5,-50,5,-50); <br>         trunkGradient.addColorStop(0,'#663300'); <br>         trunkGradient.addColorStop(0.4,'#996600'); <br>         trunkGradient.addColorStop(1,'#552200'); <br>         //树干 <br>         //context.fillStyle='#663300'; <br>         context.fillStyle=trunkGradient; <br>         context.fillRect(-5,-50,10,50); <br>         var canopyShadow=context.createLinearGradient(0,-50,0,0); <br>         canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); <br>         canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)'); <br>         context.fillStyle=canopyShadow; <br>         context.fillRect(-5,-50,10,50); <br> <br>         context.stroke(); <br>         context.restore(); <br>         //路，两条曲线 <br>         context.save(); <br>         context.translate(-10,350); <br>         context.beginPath(); <br>         context.moveTo(0,0); <br>         context.quadraticCurveTo(170,-50,260,-190); <br>         context.quadraticCurveTo(310,-250,410,-250); <br>         context.strokeStyle='#663300'; <br>         context.lineWidth=20; <br>        context.stroke(); <br>         context.restore(); <br>          //阴影！！！！ <br>         //context.save(); <br>         //context.transform(1,0,-0.5,1,0,0); <br>         //context.scale(1,0.6); <br>         //context.fillStyle='rgba(0,0,0,0.2)'; <br>         //context.fillRect(-5,-10,10,50); <br>         //createCanopyPath(context); <br>         //context.fill(); <br>         //context.rotate(1.57); <br>         //context.drawImage(myImage,0,0,100,100); <br>         //context.stroke(); <br>         //content.restore(); <br>         //标题 <br>         content.save(); <br>         <br>         context.font="60px impact"; <br>         context.fillStyle='#996600'; <br>         context.textAlign='center'; <br>         context.fillText('Happy Trails!',200,60,400); <br>          <br>         context.stroke(); <br>         content.restore(); <br>      } <br>      window.addEventListener("load",drawTrails,true); <br>    </script>
 
 
       
   
 

阴影也不出来 不知道是不是rotate没起作用？还有标题 不出字啊

回复讨论(解决方案)

大神们啊···

 
  
    <script> <br>       <br>       function createCanopyPath(context) <br>       {  <br>          context.beginPath(); <br>           <br>          context.moveTo(-25,-50); <br>          context.lineTo(-10,-80); <br>          context.lineTo(-20,-80); <br>          context.lineTo(-5,-110); <br>          context.lineTo(-15,-110); <br>   <br>         context.lineTo(0,-140); <br>   <br>         context.lineTo(15,-110); <br>          context.lineTo(5,-110); <br>          context.lineTo(20,-80); <br>          context.lineTo(10,-80); <br>          context.lineTo(25,-50); <br>       <br>          context.closePath(); <br>       } <br>       <br>       function drawTrails() <br>       { <br>          var canvas=document.getElementById('diagonal'); <br>          var context=canvas.getContext('2d'); <br>           <br>          context.save(); <br>          context.translate(130,250); <br>          //绘制树冠函数 <br>          createCanopyPath(context); <br>          //填充树冠颜色 <br>          context.lineWidth=4; <br>          context.lineJoin='round'; <br>          context.strokeStyle='#663300'; <br>          context.fillStyle='#339900'; <br>          context.fill(); <br>   <br>         //渐变 <br>          var trunkGradient=context.createLinearGradient(-5,-50,5,-50); <br>          trunkGradient.addColorStop(0,'#663300'); <br>          trunkGradient.addColorStop(0.4,'#996600'); <br>          trunkGradient.addColorStop(1,'#552200'); <br>          //树干 <br>          //context.fillStyle='#663300'; <br>          context.fillStyle=trunkGradient; <br>          context.fillRect(-5,-50,10,50); <br>          var canopyShadow=context.createLinearGradient(0,-50,0,0); <br>          canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); <br>          canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)'); <br>          context.fillStyle=canopyShadow; <br>          context.fillRect(-5,-50,10,50); <br>   <br>         context.stroke(); <br>          context.restore(); <br>          //路，两条曲线 <br>          context.save(); <br>          context.translate(-10,350); <br>          context.beginPath(); <br>          context.moveTo(0,0); <br>         context.quadraticCurveTo(170,-50,260,-190); <br>          context.quadraticCurveTo(310,-250,410,-250); <br>          context.strokeStyle='#663300'; <br>          context.lineWidth=20; <br>          context.stroke(); <br>          context.restore(); <br>                    <br>                    <br> //         context.save(); <br> //         context.rotate(1.57); <br> //         context.drawImage(myImage,0,0,100,100); <br> //         context.restore(); <br> //          //阴影！！！！ <br> //         context.save(); <br> //         context.transform(1,0,-0.5,1,0,0); <br> //         context.scale(1,0.6); <br> //         context.fillStyle='rgba(0,0,0,0.2)'; <br> //         context.fillRect(-5,-50,10,50); <br> //         createCanopyPath(context); <br> //         context.fill(); <br> <br>          //标题 <br>          context.save();      <br>          context.shadowColor='rgba(0,0,0,0.2)'; <br>          context.shadowOffsetX=15; <br>          context.shadowOffsetY=-10; <br>          context.shadowBlur=2;  <br>          context.font="60px impact"; <br>          context.fillStyle='#996600'; <br>          context.textAlign='center'; <br>          context.fillText('Happy Trails!',200,60,400); <br>          context.restore(); <br>       } <br>       window.addEventListener("load",drawTrails,true); <br>     </script>
  
  
        
    
  
 
文字和阴影显示出来了

 
  
    

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use