canvas做动画
一、绘制图片
①加载图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas做动画</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector('canvas');
var ctx=myCanvas.getContext('2d');
// 创建对象
var image=new Image();
// 绑定加载完成事件
image.onload=function(){
// 这里进行图片相关的绘制
console.log(image);//<img src='1.jpg'>
}
// 设置图片路径
image.src='1.jpg';
</script>
</body>
</html>
②三个参数：drawImage（img，x，y）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas做动画</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector('canvas');
var ctx=myCanvas.getContext('2d');
var image=new Image();
image.onload=function(){
/* *
*ctx.drawImage(image,x,y)
*image是图片对象,canvas对象,video对象
*x和y表示绘制起点,从图片的左上角开始
*/
ctx.drawImage(image,100,100);
}
image.src='1.jpg';
</script>
</body>
</html>
③五个参数：drawImage（img，x，y，w，h）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas做动画</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector('canvas');
var ctx=myCanvas.getContext('2d');
var image=new Image();
image.onload=function(){
/* *
*ctx.drawImage(image,x,y,w,h)
*image是图片对象,canvas对象,video对象
*x和y表示绘制起点,从图片的左上角开始
*w和h表示图片的大小,对图片的缩放
*/
ctx.drawImage(image,100,100,200,200);
}
image.src='1.jpg';
</script>
</body>
</html>
④九个参数：drawImage（img，x，y，w，h，x1，y1，w1，h1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas做动画</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector('canvas');
var ctx=myCanvas.getContext('2d');
var image=new Image();
image.onload=function(){
/* *
*ctx.drawImage(image,x,y,w,h,x1,y1,w1,h1)
*image是图片对象,canvas对象,video对象
*x和y对图片的进行截取的坐标,从左上角开始
*w和h表示截取图片的大小,对图片的截取
*x1和y1是表示绘制起点,从图片的左上角开始
*w1和h1是表示图片的大小,对图片的缩放
*x,y,w,h是对图片的操作
*x1,y1,w1,h1是对画布上的操作
*/
ctx.drawImage(image,100,100,200,200,100,100,200,200);
}
image.src='1.jpg';
</script>
</body>
</html>
二、帧动画
①首先需要一张精灵图，里面有一组可以连续起来做动画的人或者物
②可以动态的获取图片上主体人或者物的大小尺寸
③通过drawImage( )获取图片上的主体人或者物
④根据索引，在固定的时间间隔内（定时器），更换图片，从而达到动起来的效果，实现帧动画
三、坐标变换
①平移：translate（x，y）参数表示画布的原点的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas做动画</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector('canvas');
var ctx=myCanvas.getContext('2d');
// 第一个矩形
ctx.beginPath();
ctx.fillRect(100,100,200,100);
// 第二个矩形,移动translate(x,y) 是对原点的移动
ctx.beginPath();
ctx.translate(100,100);
ctx.fillStyle='red';
ctx.fillRect(100,100,200,100);
</script>
</body>
</html>
②缩放：scale（x，y）参数表示画布坐标的缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas做动画</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector('canvas');
var ctx=myCanvas.getContext('2d');
// 第一个矩形
ctx.beginPath();
ctx.fillRect(100,100,200,100);
// 第二个矩形,移动scale(x,y) 是对画布坐标的缩放
ctx.beginPath();
ctx.scale(0.5,0.5);
ctx.fillStyle='red';
ctx.fillRect(100,100,200,100);
</script>
</body>
</html>
③旋转：rotate（angle）参数表示旋转的角度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas做动画</title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas=document.querySelector('canvas');
var ctx=myCanvas.getContext('2d');
ctx.translate(200,200);
setInterval(function(){
// rotate(angle)默认是以画布原点的位置为圆心进行旋转
// 通过translate(x,y)可以对画布原点进行移动
angle=Math.PI/90;
ctx.rotate(angle);
ctx.strokeRect(0,0,100,100);
},100);
</script>
</body>
</html>
canvas做动画的更多相关文章
- 用Canvas做动画
之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...
- canvas小球动画原理
随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...
- 使用requestAnimationFrame做动画效果二
3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...
- 让CALayer的shadowPath跟随bounds一起做动画改变-b
在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性 ...
- Android使用XML做动画UI
在Android应用程序,使用动画效果,能带给用户更好的感觉.做动画可以通过XML或Android代码.本教程中,介绍使用XML来做动画.在这里,介绍基本的动画,如淡入,淡出,旋转等. 效果: htt ...
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果
- [UWP]用Shape做动画
相对于WPF/Silverlight,UWP的动画系统可以说有大幅提高,不过本文无意深入讨论这些动画API,本文将介绍使用Shape做一些进度.等待方面的动画,除此之外也会介绍一些相关技巧. 1. 使 ...
- [UWP]用Shape做动画(2):使用与扩展PointAnimation
上一篇几乎都在说DoubleAnimation的应用,这篇说说PointAnimation. 1. 使用PointAnimation 使用PointAnimation可以让Shape变形,但实际上没看 ...
- transition和animation做动画（css动画二）
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...
随机推荐
- MSSQLSERVER 服务运行内存设置较小导致启动服务失败
问题产生原因: 手动设置MSSQLSERVER 运行内存,设置值未达到MSSQLSERVER 服务运行内存最低值(max server memory 所允许的最小内存量是 128 MB.),导致MSS ...
- 「UER#2」信息的交换
「UER#2」信息的交换 吉利题.. 不难发现,置换中的每一个循环是独立的,每一个循环分别对应一个独立的联通块. 根据题目的性质,每一个联通块做的事情等价于其按照编号从小到大遍历的的dfs生成树做的事 ...
- C# 获取特殊日期
//1.当前时间DateTime dt = DateTime.Now; //2.本周周一DateTime startWeek = dt.AddDays(1 - Convert.ToInt32(dt.D ...
- aop 打印请求信息
项目中使用 AOP 打印请求信息,打印响应信息.package com.example.aspect; import com.alibaba.fastjson.JSON;import com.goog ...
- 阿里巴巴 Java 开发手册 (七) 控制语句
1. [强制]在一个 switch 块内,每个 case 要么通过 break/return 等来终止,要么注释说明程 序将继续执行到哪一个 case 为止:在一个 switch 块内,都必须包含一个 ...
- java之hiberante之集合映射之list映射
这篇讲解 集合映射之List映射 1.通常对于集合,在hibernate中的处理都是使用set来完成.但是hibernate也提供了对于其他几种集合的映射. 在这里实现List的映射,List是有序的 ...
- C# vb .net图像合成-多图片叠加合成
在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...
- sqlserver还原差异备份
因为之前遇到还原差异备份,最开始遇到SQLServer报错:"无法还原日志备份或差异备份,因为没有文件可用于前滚".查阅很多资料后,终于得到解决.收集整理成这篇随笔. 问题原因:出 ...
- Date类的相关方法记录
1.Date类中的时间单位是毫秒,System.currentTimeMills()方法就是获取当前时间到1970年1月1日0时0分0秒(西方时间)的毫秒数. public class Test6 { ...
- 易百教程人工智能python修正-人工智能NLTK性别发现器
在这个问题陈述中,将通过提供名字来训练分类器以找到性别(男性或女性). 我们需要使用启发式构造特征向量并训练分类器.这里使用scikit-learn软件包中的标签数据. 以下是构建性别查找器的Pyth ...