html5 canvas 里面绘制标题 和阴影_html/css_WEB-ITnose

nbsp;html>

 

   <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没起作用？还有标题 不出字啊

回复讨论(解决方案)

大神们啊···

nbsp;html>
 
  

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

nbsp;html>
 
  

    <script> <br /> <br /> function createCanopyPath(context) <br /> { <br /> context.beginPath(); <br /> <br /> context.moveTo(-25,-50); <br /> conte…… 我试试啊&middot; </script>