当前位置: 代码迷 >> HTML/CSS >> html5 canvas 里边绘制标题 和阴影
  详细解决方案

html5 canvas 里边绘制标题 和阴影

热度:998   发布时间:2012-12-29 10:28:09.0
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();