HTML的一个Canvas实例

来源：互联网发布：插排选购知乎编辑：程序博客网时间：2024/05/21 04:25
<!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>
0 0