Canvas入门(二)

十四缩放canvas

 

还有一种需求就是同样一个树在页面中可能需要出现多次,现在我们来解决这个问题,我们把代码中用于绘制树的操作独立出来,当做一个单例的历程,称为drawTree。如下:绘制树对象的函数

//创建树对象绘制函数,以便重用

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);

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();

//加宽线条

context.lineWidth = 4;

//平滑路径的接合点

context.lineJoin = ’round’;

//将颜色改为绿色

context.strokeStyle = ‘green’;

context.stroke();

// 将填充颜色设置为绿色并填充树冠

context.fillStyle=”#339900″;

context.fill();

}

可以看到,drawTree函数包括了之前绘制树冠、树干和树干渐变的所有代码。为了在新位置画出大一点的树,我们将使用另一种变换方式——缩放函数context.scale,如下:

//在130,250的位置绘制第一课树

context.save();

context.translate(130,250);

drawTree(context);

context.restore();

 

//在260,500的位置绘制第二棵树

context.save();

context.translate(260,500);

 

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

context.scale(2,2);

drawTree(context);

context.restore();

scale函数带有两个参数类分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候,向其传递在本方向轴上图像要放到(或者缩小)的量。如果x值为2,就代表所绘制图形中全部元素都会变成两倍宽,如果y值为0.5,绘制出来的图像都会变成之前的一半高

 

本教程由尚硅谷教育大数据研究院出品,如需转载请注明来源,欢迎大家关注尚硅谷公众号(atguigu)了解更多。


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)