html5 Canvas_html/css_WEB-ITnose でタイトルと影を描画する

<スクリプト>

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.ストロークスタイル='#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.ストローク();
context.restore();
//路、两条曲線
context.save();
context.translate(-10,350);
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
context.quadraticCurveTo(310,-2​​50,410,-2​​50);
context.ストロークスタイル='#663300';
context.lineWidth=20;
        context.ストローク();
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.ストローク();
//content.restore();
//标题
content.save();

context.font="60px impact";
context.fillStyle='#996600';
context.textAlign='center';
context.fillText('ハッピートレイル!',200,60,400);

context.ストローク();
content.restore();
}
window.addEventListener("load",drawTrails,true);


<ボディ>
    

<ボディ>

阴影也不出来 不知道是不是回転没起作用?还有标题不出字啊

回复讨论(解决方案)

大神们啊 · ·

<スクリプト>

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.ストロークスタイル='#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.ストローク();
context.restore();
//路、两条曲線
context.save();
context.translate(-10,350);
context.beginPath();
context.moveTo(0,0);
         context.quadraticCurveTo(170,-50,260,-190);
context.quadraticCurveTo(310,-2​​50,410,-2​​50);
context.ストロークスタイル='#663300';
context.lineWidth=20;
context.ストローク();
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 インパクト";
context.fillStyle='#996600';
context.textAlign='center';
context.fillText('ハッピートレイル!',200,60,400);
context.restore();
}
window.addEventListener("load",drawTrails,true);



    



文字和阴影表示成功

<スクリプト>

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

context.moveTo(-25,-50);
コンテ…… 我试试啊 ·