博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Canvas基本动画-循环全景照片
阅读量:6870 次
发布时间:2019-06-26

本文共 384 字,大约阅读时间需要 1 分钟。

hot3.png

这是MDN上面的一个的例子,展现一个自左向右滑动的全景图,例子中采用的图片是一个尺寸大于canvas的图片

代码解释:图片加载完成后,由于图片宽度大于画布的宽度,为X重新赋值,此时x为负数,并为clearX与clearY赋比较大的值,然后间隔执行绘制图片的函数,绘制图片时首先清空画布,根据x的值执行特定的代码,第一次由于x是负数,并不满足判断的条件,只执行ctx.drawImage(img, x, y, imgW, imgH);第二次x的值不断变大,先执行 ctx.drawImage(img, x - imgW + 1, y, imgW, imgH) ,再执行ctx.drawImage(img, x, y, imgW, imgH);

简单的图示

转载于:https://my.oschina.net/u/2612473/blog/3013450

你可能感兴趣的文章
2014-07-18 Java Web的学习(15)-----struts2(1)----XWork中的容器
查看>>
7个示例科普CPU Cache
查看>>
框架汇总
查看>>
我的上半年“手相”-----“奔跑中的2015”
查看>>
mb_substr()----------php
查看>>
[OpenStack] OpenStack Essex - Glance - Image Management
查看>>
Nginx 之一:编译安装nginx 1.8.1 及配置
查看>>
一日三省吾身时间
查看>>
Android四大组件之Activity
查看>>
我的友情链接
查看>>
Axios使用说明
查看>>
未加入域的Windows 7+outlook 2010连接Exchange 2013经常弹出用户名和密码
查看>>
如何利用多核CPU来加速你的Linux命令 — awk, sed, bzip2, grep, wc等
查看>>
分布式服务框架 Zookeeper -- 管理分布式环境中的数据(转)
查看>>
Android7.1Shortcuts
查看>>
Java面试题
查看>>
Spark GraphX之全局聚类系数、局部聚类系数、网络平均聚类系数
查看>>
oracle排序操作
查看>>
我的友情链接
查看>>
4-4高项作业
查看>>