欢迎光临小鱼网个人网站!

登录/注册
html5中canvas应用

html5中简介canvas

<canvas id="trails" style="border: 1px solid;" height="500" width="400"></canvas> 

<script>

var gravel = new Image(); 

gravel.src ="images/nes1.jpg"; 

gravel.onload = function () { 

drawTrails(); 

};

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 drawTree(context) { 

//给树创建树影 

context.save(); 

//x值随着Y值得增加而增加,借助拉伸变换,可以创建一棵用作阴影的倾斜的树,应用了变换以后,所有坐标都与矩阵相乘 

context.transform(1, 0, -0.5,1, 0, 0); 

//在Y轴方向,将阴影的高度压缩为原来的60% 

context.scale(1, 0.6); 

//使用透明度为20%的黑色填充树干 

context.fillStyle ='rgba(0,0,0,0.2)'; 

context.fillRect(-5, -50, 10,50); 

//使用已有的阴影效果重新绘制树 

createCanopyPath(context); 

context.fill(); 

//恢复之前的canvas状态 

context.restore(); 

createCanopyPath(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.2,'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.lineWidth = 4; 

//平滑路径的接合点round/bevel/miter 

context.lineJoin = 'round'; 

//将颜色改为棕色 

context.strokeStyle = '#663300'; 

context.stroke(); 

//将填充色设置为绿色并填充树冠(填充是在绘图之前进行的,所以不会覆盖线条宽度,如果在绘图之后填充,就会覆盖线条宽度) 

context.fillStyle ="#339900"; 

context.fill(); 

}

function createCurvePath(context){ 

//保存canvas的状态并绘制路径 

context.save(); 

context.translate(-10, 350);

context.beginPath(); 

//第一条曲线向右上方弯曲(第一组xy坐标是曲线的控制点,第二组xy坐标是曲线的终点) 

context.moveTo(0, 0); 

context.quadraticCurveTo(170,-50, 260, -190); 

//第二条曲线向右下方弯曲 

context.quadraticCurveTo(310,-250, 410, -250); 

//用背景图替代棕色粗线条 

context.strokeStyle =context.createPattern(gravel, 'repeat'); 

//使用棕色的粗线条来绘制路径 

context.strokeStyle='#663300'; 

context.lineWidth = 20; 

context.stroke(); 

//恢复之前的canvas状态 

context.restore(); 

}

function drawTrails() { 

var canvas =document.getElementById('trails'); 

var context =canvas.getContext('2d'); 

//在(130,250)的位置绘制第一颗树 

context.save(); 

context.translate(130, 250); 

drawTree(context); 

//绘制当前路径 // 

context.stroke(); 

context.restore(); 

//在(260,500)的位置绘制第二颗树 

context.save(); 

context.translate(260, 500); 

//第二颗树的宽高分别放大至原来的2倍 

context.scale(2, 2); 

drawTree(context); 

context.restore(); 

//绘制小路 

createCurvePath(context); 

//在canvas上绘制标题文本 

context.save(); 

//字号为60px,字体为impact 

context.font = "40px impact"; 

//将文本填充为棕色 

context.fillStyle = '#996600'; 

//将文本设置为居中对齐 

context.textAlign = 'center'; 

//设置文字阴影的颜色为黑色,透明度为20% 

context.shadowColor ='rgba(0,0,0,0.2)'; 

//将阴影向右移动15px,向上移动10px 

context.shadowOffsetX = 15; 

context.shadowOffsetY = -10; 

//轻微模糊阴影 

context.shadowBlur = 2; 

//在canvas顶部中央的位置以大字体的形式显示文本 

context.fillText('www.xyubing.com', 200, 60, 400); 

context.restore(); 

}

</script>

image.png

Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。