Canvas入门(二)

十五Canvas变换

 

变换操作并不限于缩放和平移,我们可以使用函数context.rotate(angle)来旋转图像,甚至直接修改底册变换矩阵以完成一些高级操作,如裁剪图像的绘制路径。以下代码在修改了原有创建树图像的方法,为树增加了倒影:

//创建用作树干纹理的三阶水平渐变

var trunkGradient = context.createLinearGradient(-5,-50,5,-50);

//保存当前状态

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将创建树冠的方法从新封装,已方便复用

createCanopyPath(context);

context.fill();

 

//恢复之前的状态

context.restore();

效果:

 

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


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

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

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