html5 canvas 里边绘制标题 和阴影
日期：2014-05-17 浏览次数：20668 次
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();
&nb
<!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();
&nb
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
