您的位置：首页 > Web前端 > HTML
HTML的一个Canvas实例

2014-11-04 09:40 357 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5</title>
<script>
function drawTree( context){
//绘制树干： 注意这里使用了浙变色做树干纹理
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
//树干左侧边缘是一般程度的棕色
trunkGradient.addColorStop( 0, '#663300');
//树干中间偏左的位置颜色要淡一些
trunkGradient.addColorStop(0.4,'#996600');
//树干右侧边缘的颜色要深一些
trunkGradient.addColorStop(1,'#552200');
//使用浙变色填充树干
context.fillStyle=trunkGradient;
context.fillRect( -5,-50,10,50);
//接下来，创建垂直浙变，用作树冠在树干上的投影
var canopyShadow=context.createLinearGradient(0,-50,0,0);
//起点透明度设为50%的黑色
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);

//调用方法完成绘制树冠
createCanopyPath( context );

//加宽线条
context.lineWidth=4;
//平滑路径的接合点
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';

context.stroke();
//将封闭的路径填充色设置为绿色并填充成树冠，注意这两句话放在  stroke()前和后面的效果不同。
context.fillStyle='#339900';
context.fill();

//使用transform()完成旋转，以实现阴影效果.
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.restore();
}

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");
//在130,250位置绘制第一棵树
context.save();  //保存当前绘图状态
context.translate(150,210);
drawTree(context );
context.restore();
//在260,500的位置绘制第二棵树
context.save();

/*
开始绘制一条林间小道
*/
context.save();  //保存当前绘图状态
context.translate(0,190);
context.beginPath();
//第一条曲线向右上方弯曲
context.moveTo(0,0);    //将坐标恢复到修正层的原点
//  前两个值代表控制点的 x,y坐标，后两个值代表终点的x, y值.
context.quadraticCurveTo(170, -50,60,-90);
//第二条曲线向右下方弯曲
context.quadraticCurveTo(310,-250,410,-250);
//使用背景图替换线条
context.strokeStyle=context.createPattern(gravel, 'repeat');
context.lineWidth=15;
//会制当前路径
context.stroke();
context.restore();

//向右下方移动绘图上下文
context.translate(15,150);
//将第二棵树的宽和高分别放大至原来的2倍
context.scale(1.2,0.8);
drawTree(context);
context.restore();

/**
在canvas上绘制标题文本
*/
context.save();
context.font="20px impact";
context.fillStyle="#996600";
context.textAlign="center";
context.fillText("Happy Trails!",70,30,400);

//给标题添加阴影效果
context.shadowColor='rgba(255,0,0,0)';
context.shadowOffsetX=50;
context.shadowOffsetY=-10;

context.shadowBlur=2;

context.restore();
context.save();

}
//加载砾石背景图
var gravel=new Image();
gravel.src="gravel.jpg";
gravel.onload=function(){
drawTrails();
}

</script>
</head>

<body>
<h1>本案例演示了使用canvas文本操作，   context.fillText(text,x,y,maxwidth)   context.strokeText(text,x,y,maxwidth)</h1>
<canvas id="diagonal" style="border:1px solid;" width="200" height="200">
</canvas>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航