html5 canvas 里面绘制标题和阴影

Im_yours 2012-11-07 11:18:24

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

...全文

336 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

快乐的诸葛明 2012-11-09

打赏
举报

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

Im_yours 2012-11-09