神奇且强大的canvas
一．Canvas的基本介绍
１．什么是Canvas
定义：是HTML5提供的一种新标签, ie9才开始支持的，Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
２．Canvas主要应用的领域
1 可视化数据： 各类统计图表，比如:百度的echart
2 场景秀： 用Canvas实现动态的广告效果能够非常融洽的跨平台运行。如:手机中微产品.在移动端兼容性很好
3 游戏： canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas成为HTML5小游戏开发首选。现阶段h5做游戏,营业方式不是很明确. 25 超棒的 HTML5 Canvas 游戏
4 其他可嵌入网站的内容 (多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
5 趋势=> 模拟器： 无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。模拟真实硬件环境,如移动端各种类型手机.
6 趋势=> 远程计算机控制： Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
7 趋势=> 图形编辑器： Photoshop图形编辑器将能够100%基于Web实现。
８ 版本支持
最新标准：http://www.w3.org/TR/2dcontext/
稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
３．Canvas绘制线条
０１Canvas标签语法和属性
- canvas：画布油布的意思 英 ['kænvəs] 美 ['kænvəs]
- 标签名：canvas，双标签，需要闭合。
- 单位： px，可以设置width和height属性，否则忽略单位。
- width和hegiht：默认300*150像素
注意：
- 不要用CSS控制它的宽和高,会导致内部图片被拉伸，
- 重新设置canvas标签的宽高属性会让画布擦除所有的内容
- 可以给canvas画布设置背景色
０２ 浏览器不兼容处理
ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持
只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
移动设备几乎支持Canvas的所有API
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
-
如果浏览器不兼容，最好进行友好提示
ｅｇ： <canvas id="canvas"> 你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本 </canvas> 如果浏览器不兼容，可以使用flash等方式进行替换。
４．Canvas绘图上下文context
０１ Context：Canvas的上下文、绘制环境。
上下文：是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容，Canvas的绘图是使用JS调用Canvas的接口来完成的。
Context对象就是JavaScript操作Canvas的接口。
-
使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文
ｅｇ： //获得画布 var canvas = document.getElementById( 'cavsElem' ); //注意：2d小写，二维， 3d：webgl var ctx = canvas.getContext( '2d' );
５．基本的绘制路径
５．１Ｃanvas绘制的基本说明
- canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大
- 绘制起点：ctx.moveTo(x, y); //x,y 都是相对于 canvas盒子的最左上角。
- 绘制终点：ctx.lineTo(x, y); //从x,y的位置绘制一条直线到起点或者上一个线头点。
- 开始路径：ctx.beginPath();作用：将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽.
- 闭合路径：ctx.closePath();作用：闭合路径会自动把最后的线头和开始的线头连在一起。
- 描边：ctx.stroke();
５．２Canvas绘制的基本步骤：
第一步：获得上下文 =>canvasElem.getContext('2d');
第二步：开始路径规划 =>ctx.beginPath()
第三步：移动起始点 =>ctx.moveTo(x, y)
第四步：绘制(点、线、面、图片...) =>ctx.lineTo(x, y)
第五步：闭合路径 =>ctx.closePath();
-
第六步：绘制描边 =>ctx.stroke();
ｅｇ： <body> <canvas id="canvas" width="900" height="600" style="border: 1px solid #000;">你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本</canvas> <script> //1.获取canvas var canvas = document.getElementById('canvas'); //2.获取上下文 var ctx = canvas.getContext('2d'); //3.绘制一条直线 //起点 ctx.moveTo(100,100); //终点 ctx.lineTo(300,100); //注意:以上只是对当前路径进行描述,表示的是路径的状态,并没有进行绘制操作 //线宽 ctx.lineWidth = 10; //颜色 ctx.strokeStyle = 'red'; //绘制 描边 ctx.stroke(); //4.绘制第二条线 //开启路径.作用:将当路径和之前路径隔离,方便你对当前路径进行设置样式,线宽. ctx.beginPath(); ctx.moveTo(200,50); ctx.lineTo(200,250); //5.绘制第三条线段 ctx.lineTo(300,300); //闭合路径: 作用:将开始的线头和结束的线头连接 ctx.closePath(); ctx.strokeStyle = 'green'; ctx.lineWidth = 5; //描边 ctx.stroke(); </script>
二.Canvas绘制的基本应用
2.1 Canvas绘制表格-背景
eg:
<script>
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.设置常量
var marginWH = 10;//表示每一个格子之间的空格距离
//计算行和列
var row = canvas.height / marginWH;
var col = canvas.width / marginWH;
/*
* 绘制背景网格
* */
//3.绘制横线
for(var i = 0;i<row;i++){
ctx.moveTo(0,i * marginWH);
ctx.lineTo(canvas.width,i * marginWH);
};
//绘制竖线
for(var i = 0;i<col;i++){
ctx.moveTo(i * marginWH,0);
ctx.lineTo(i * marginWH,canvas.height);
};
//设置颜色
ctx.strokeStyle = 'red';
//设置线宽
ctx.lineWidth = 0.5;
//4.绘制 描边
ctx.stroke();
</script>
2.2 Canvas绘制表格完成
eg:
<script>
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.设置常量
var marginWH = 10;
//计算行和列
var row = canvas.height / marginWH;
var col = canvas.width / marginWH;
/*
* 绘制背景网格
* */
//3.绘制横线
for(var i = 0;i<row;i++){
ctx.moveTo(0,i * marginWH);
ctx.lineTo(canvas.width,i * marginWH);
};
//绘制竖线
for(var i = 0;i<col;i++){
ctx.moveTo(i * marginWH,0);
ctx.lineTo(i * marginWH,canvas.height);
};
//设置颜色
ctx.strokeStyle = 'red';
//设置线宽
ctx.lineWidth = 0.5;
//4.绘制 描边
ctx.stroke();
//5.绘制坐标轴
//常量
var x0 = 100, y0 = 500;//坐标原点
var maxWidth = 500, maxHeight = 400;//坐标轴的长度
//5.1横轴
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x0 + maxWidth,y0);
ctx.lineTo(x0 + maxWidth - marginWH,y0 - marginWH);
ctx.moveTo(x0 + maxWidth,y0);
ctx.lineTo(x0 + maxWidth - marginWH,y0 + marginWH);
//设置颜色和线宽
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
//5.2绘制 描边
ctx.stroke();
//6.绘制竖坐标
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x0,y0 - maxHeight);
ctx.lineTo(x0 - marginWH,y0 - maxHeight + marginWH);
ctx.moveTo(x0,y0 - maxHeight);
ctx.lineTo(x0 +marginWH,y0 - maxHeight + marginWH);
//设置颜色和线宽
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
//绘制 描边
ctx.stroke();
//7.绘制曲线
//常量
var data = [20, 50, 10, 60, 40, 80];
//比例
var w = maxWidth / data.length;
var h = maxHeight / 100;//(1:100)设置比例
//遍历
//坐标点 类似于{x:20,y:30}
var pointArr = [];
for(var i = 0;i<data.length;i++){
pointArr.push({
x:x0 + w *(i+1),
y: y0 - h * data[i]
});
}
//遍历坐标点数组
//开启路径
ctx.beginPath();
//起点
ctx.moveTo(x0,y0);
for(var i = 0;i<pointArr.length;i++){
//终点
ctx.lineTo(pointArr[i].x,pointArr[i].y);
};
//设置颜色和线宽
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
//绘制 描边
ctx.stroke();
</script>
2.3Canvas绘制画板
eg:
<script>
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.监听鼠标的移动
canvas.onmousedown = function (event){
//清屏操作
ctx.clearRect(0,0,canvas.width,canvas.height);
//开启路径
ctx.beginPath();
//起点
ctx.moveTo(event.offsetX, event.offsetY);
canvas.onmousemove = function (event){
//终点
ctx.lineTo(event.offsetX, event.offsetY);
//设置颜色和线宽
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
//绘制 描边
ctx.stroke();
};
canvas.onmouseup = function (){
canvas.onmousemove = null;
canvas.onmouseup = null;
};
};
2.4Canvas绘制矩形
1.方式1:先设置rect()方法,然后设置样式,再描绘ctx.stroke();
- 语法：ctx.rect(x, y, width, height);
- 解释：x, y是矩形左上角坐标， width和height都是以像素计
注意:
- rect方法只是规划了矩形的路径，并没有填充和描边。
- rect: abbr. 矩形（rectangular）；收据（receipt）
2.方式2:快速创建描边矩形和填充矩形
- 语法： ctx.strokeRect(x, y, width, height);
- 参数跟ctx.rect相同，注意此方法绘制完路径后立即进行stroke绘制
- 语法：ctx.fillRect(x, y, width, height);
- 参数跟ctx.rect相同， 此方法执行完成后。立即对当前矩形进行fill填充。
3.清除矩形(clearRect)
语法：ctx.clearRect(x, y, width, hegiht);
-
解释：清除某个矩形内的绘制的内容，相当于橡皮擦。
eg: <script> //1.获取canvas和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //2.监听鼠标的移动 canvas.onmousedown = function (event){ //清屏操作 ctx.clearRect(0,0,canvas.width,canvas.height); //开启路径 ctx.beginPath(); //起点 ctx.moveTo(event.offsetX, event.offsetY); canvas.onmousemove = function (event){ //终点 ctx.lineTo(event.offsetX, event.offsetY); //设置颜色和线宽 ctx.strokeStyle = 'red'; ctx.lineWidth = 5; //绘制 描边 ctx.stroke(); }; canvas.onmouseup = function (){ canvas.onmousemove = null; canvas.onmouseup = null; }; };
2.5Canvas绘制弧线
2.51 绘制圆形(arc)
01 arc()方法说明:
- 概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
- 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
- arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk]
- counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
- x,y：圆心坐标。
- r：半径大小。
- sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。
- eAngel:结束的角度，注意是弧度。π
- counterclockwise：是否是逆时针。true是逆时针，false：顺时针(默认)
- 弧度和角度的转换公式： rad = deg*Math.PI/180;
- 在Math提供的方法中sin、cos等都使用的弧度
三角函数的补充:
- Math.sin(弧度); //夹角对面的边 和 斜边的比值
- Math.cos(弧度); //夹角侧边 与斜边的比值
圆形上面的点的坐标的计算公式:
- x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
- y =y0 + Math.sin(rad) * R;//注意都是弧度
三角函数
2.6非零正交原则
01
- 语法：ctx.fill();
- 解释: 填充，是将闭合的路径的内容填充具体的颜色。默认黑色
- 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。
02非零正交原则原则
使用一个初始值为0 的计数器判断该区域是否填充?
- 1.对于路径中任意给定的区域,从该区域内部画一条足够长的线段,使此线段的终点完全落在路径范围外部.
- 2.如果线段是与路径的顺时针部分相交，则计数器加1，
- 3.如果线段是与路径的逆时针部分相交，则计数器减1
- 4.若计数器的最终值不是0，那么此区域就在路径里面,在调用fill()方法时，浏览器就会对其进行填充
- 5.如果计数器最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充
应用: 圆环
eg:
<script>
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制圆环
//内圆
ctx.arc(200,200,100,0,2 * Math.PI,false);
//外圆
ctx.arc(200,200,200,0,2 * Math.PI,true);
//填充颜色
ctx.fillStyle = 'pink';
ctx.fill();
</script>
2.7Canvas绘制五环
eg:
<script>
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制奥运五环
//第一个五环
//遍历
//颜色数组
var colorArr = ['red','green','yellow','blue','black'];
for(var i = 0;i<5;i++){
ctx.beginPath();
ctx.arc(100 *(i+1),150,80,0,2 * Math.PI);
ctx.strokeStyle = colorArr[i];
ctx.lineWidth = 5;
ctx.stroke();
};
//绘制第二个五环
var colorArr = ['red','green','yellow','blue','black'];
for(var i = 0;i<5;i++){//0,1,2
ctx.beginPath();
if(i<3){
ctx.arc(100 *(i+1),350,80,0,2 * Math.PI);
}else{//3,4
ctx.arc(100 *(i-2) + 40,350 + 80,80,0,2 * Math.PI);
}
ctx.strokeStyle = colorArr[i];
ctx.lineWidth = 5;
ctx.stroke();
};
</script>
2.8Canvas绘制饼状图
eg:
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制饼状图
//常量
var canW = canvas.width * 0.5;//圆心
var canH = canvas.height * 0.5;//圆心
var radius = 150;
//数据
var dataArr = [
{name:'北京',color:'yellow',value:'0.3'},
{name:'上海',color:'red',value:'0.2'},
{name:'广州',color:'green',value:'0.1'},
{name:'深圳',color:'blue',value:'0.15'},
{name:'杭州',color:'purple',value:'0.25'}
];
//3.遍历并绘制扇形
var beginAngle = -90 * Math.PI/180;
for(var i= 0;i<dataArr.length;i++){
//3.1获取每一个扇形的角度
var temAngle = dataArr[i].value *360 *Math.PI/180;
//3.2获取终点
var endAngle = beginAngle + temAngle;
//开启新路径
ctx.beginPath();
ctx.moveTo(canW,canH);
ctx.arc(canW,canH,radius,beginAngle,endAngle);
ctx.fillStyle = dataArr[i].color;
ctx.fill();
//更新起点
beginAngle = endAngle;
}
</script>
2.9Canvas绘制文字
01.绘制上下文的文字属性
font 设置或返回文本内容的当前字体属性
-
font 属性使用的语法与 CSS font 属性相同。
eg: ctx.font = "18px '微软雅黑'"; textAlign 设置或返回文本内容的当前对齐方式
start : 默认。文本在指定的位置开始。
end : 文本在指定的位置结束。
center: 文本的中心被放置在指定的位置。
left : 文本左对齐。
-
right : 文本右对齐。
eg: ctx.textAlign = 'left'; textBaseline 设置或返回在绘制文本时使用的当前文本基线
alphabetic ： 默认。文本基线是普通的字母基线。
top ： 文本基线是 em 方框的顶端。。
hanging ： 文本基线是悬挂基线。
middle ： 文本基线是 em 方框的正中。
ideographic： 文本基线是em基线。
-
bottom ： 文本基线是 em 方框的底端。
eg: ctx.textBaseline = 'top'; 单词: alphabetic: 字母的；照字母次序的 [,ælfə'bɛtɪk] ideographic：表意的；表意字构成的 英 [,ɪdɪəʊ'ɡræfɪk] 美 [,ɪdɪə'græfɪk]
02 上下文绘制文字的方法
ctx.fillText() 在画布上绘制“被填充的”文本
ctx.strokeText() 在画布上绘制文本（无填充）
ctx.measureText() 返回包含指定文本宽度的对象
-
单词：measure 测量；估量；权衡 英 ['meʒə] 美 ['mɛʒɚ]
eg: //综合案例代码： ctx.moveTo( 300, 300 ); ctx.fillStyle = "purple"; //设置填充颜色为紫色 ctx.font = '20px "微软雅黑"'; //设置字体 ctx.textBaseline = "bottom"; //设置字体底线对齐绘制基线 ctx.textAlign = "left"; //设置字体对齐的方式 //ctx.strokeText( "left", 450, 400 ); ctx.fillText( "Top-g", 100, 300 ); //填充文字
03 文字阴影和模糊范围
ctx.shadowColor
-
ctx.shadowBlur
eg: //设置阴影的颜色 ctx.shadowColor = 'orange'; //设置模糊范围 ctx.shadowBlur = 15; ctx.shadowOffsetX = -10; //水平偏移量 ctx.shadowOffsetY = 20; //垂直偏移量
eg:
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制文字
//设置文字字号
ctx.font = "100px '微软雅黑'";
//颜色和线宽
ctx.strokeStyle = 'red';
ctx.lineWidth = 4;
//无填充文字
ctx.strokeText('Never Say No',200,200);
//填充颜色
ctx.fillStyle = 'purple';
//有填充的文字
ctx.fillText('Never Say No',200,200);
//3.绘制第二个文字
//4.修改垂直对齐方式
//注意:一旦文字绘制完,就有一条确定的基线,只要调整对齐的方式,都会根据基线调整
//ctx.textAlign = 'center';
//5.水平对齐方式
ctx.textBaseline = 'top';
//6.模糊效果
ctx.shadowBlur = 15;
//阴影颜色
ctx.shadowColor = 'blue';
//阴影偏移方向
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;
//无填充文字
ctx.strokeText('I Miss You',200,320);
//有填充文字
ctx.fillStyle = 'orange';
ctx.fillText('I Miss You',200,320);
</script>
2.10Canvas绘制饼状图以及绘制文字
eg:
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制饼状图
//常量
var canW = canvas.width * 0.5;//圆心
var canH = canvas.height * 0.5;//圆心
var radius = 150;
//数据
var dataArr = [
{name:'北京',color:'yellow',value:'0.3'},
{name:'上海',color:'red',value:'0.2'},
{name:'广州',color:'green',value:'0.1'},
{name:'深圳',color:'blue',value:'0.15'},
{name:'杭州',color:'purple',value:'0.25'}
];
//3.遍历并绘制扇形
var beginAngle = -90 * Math.PI/180;
for(var i= 0;i<dataArr.length;i++){
//3.1获取每一个扇形的角度
var temAngle = dataArr[i].value *360 *Math.PI/180;
//3.2获取终点
var endAngle = beginAngle + temAngle;
//开启新路径
ctx.beginPath();
ctx.moveTo(canW,canH);
ctx.arc(canW,canH,radius,beginAngle,endAngle);
ctx.fillStyle = dataArr[i].color;
ctx.fill();
//3.3绘制文字
//获取每一个文字的角度
var textAngle = beginAngle + temAngle * 0.5;
//文字坐标
var textX = canW + (radius+30)* Math.cos(textAngle);
var textY = canH + (radius+30)* Math.sin(textAngle);
//获取文字内容
var text = dataArr[i].name + dataArr[i].value *100 + '%';
//设置文字字号
ctx.font = "20px '微弱雅黑'";
ctx.strokeStyle = dataArr[i].color;
//设置左边文字的对齐方式
if(textAngle>90 * Math.PI/180 && textAngle<270 *Math.PI/180){
ctx.textAlign = 'end';
}
ctx.strokeText(text,textX,textY);
//更新起点,让当前的终点角度成为下一个图形的起点的角度
beginAngle = endAngle;
}
</script>
2.11Canvas绘制图片
01 基本的绘制图片的方式
- 语法:context.drawImage(img,x,y);
- 参数说明： x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象
02 在画布上绘制图像,并规定图像的宽度和高度
- 语法:context.drawImage(img,x,y,width,height);
- 参数说明：width 绘制图片的宽度, height：绘制图片的高度
- 如果指定宽高，最好成比例，不然图片会被拉伸
- 等比公式： toH = Height * toW / Width;
- 设置的高度 = 原高度 * 设置的宽度 / 原宽度;
03 图片裁剪 ,并在画布上定位被裁剪的部分
- 语法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
- 参数说明：
- sx,sy 裁剪的左上角坐标，
- swidth：裁剪图片的高度。
- sheight:裁剪的高度
- 其他同上
04 用JavaScript创建img对象
第一种方式:直接添加图片
eg:var img = document.getElementById("imgId");
第二种方式:创建图片对象
eg:
var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.alt = "文本信息";
img.onload = function() {
//图片加载完成后，执行此方法
示意图:
原图片:
eg:ctx.drawImage(img, 100, 100, 300, 216);
截取图片:
eg:
裁剪的位置: sx,sy,swidth,sheight : 50 50 120 120
sx,sy,swidth,sheight 相对于原图片的裁剪区域
放置位置:x,y,width,height : 350, 100, 120, 120
x, y ,width, height 相对于画布的显示区域
ctx.drawImage(img, 50, 50, 120, 120, 450, 100, 120, 120);
图片说明:
eg:
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制图片 方式一 标签绘制
/*var img = document.getElementById('img');
//注意:图片一定要在加载完成后再进行绘制
//x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象。
img.onload = function (){
ctx.drawImage(img,100,100);
}*/
//3.绘制图片 方式二 对象绘制
/*var image = new Image();
image.src = 'images/img_01.jpg';
image.addEventListener('load',function(){
ctx.drawImage(image,100,100);
});*/
//4.绘制图片 方式三 对象绘制 等比例
/*var image = new Image();
image.src = 'images/img_01.jpg';
image.addEventListener('load',function (){
//等比公式 w / h = 图片的宽/ 图片的高;
var w = 200;
var h = w * image.height / image.width;
ctx.drawImage(image,w,h);
});*/
//5.图片截取
//方法:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
var image1 = new Image();
image1.src = 'images/img_01.jpg';
image1.addEventListener('load',function (){
//img:截取图片
//50,50,120,120 表示截取的x,y, 截取的宽和高
//200,200,120,120 表示在画布上的x,y和宽高
ctx.drawImage(image1,50,50,120,120,200,200,120,120);
});
</script>
2.12Canvas绘制帧动画
eg:
<body style="padding: 100px">
<canvas id="canvas" width="900" height="600" style="border: 1px solid #000;"></canvas>
<!---->
<button dir=2>上</button>
<button dir=6>下</button>
<button dir=0>左</button>
<button dir=4>右</button>
<p></p>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制图片
var image = new Image();
image.src = 'images/girl.png';
//常量
var clipWH = 256;
var index = 0;//累加的变量
var dir = 0;//设置默认的方向为0;
image.addEventListener('load',function (){
//记录this
var that = this;
//开启定时器
setInterval(function (){
//清屏
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(that,index*clipWH,dir*clipWH,clipWH,clipWH,200,200,clipWH,clipWH);
//累加
index++;
//取余---让其无限的循环//让他永远等于 0-7
index %= 8;
},200);
});
//点击按钮,切换动画
//获取所有的按钮,根据字符串,获取所有的子元素
var buttonList = document.querySelectorAll('button');
for(var i= 0;i<buttonList.length;i++){
//给所有的按钮添加点击事件
buttonList[i].addEventListener('click',function (){
//获取按钮中的dir中的值
dir = this.getAttribute('dir');
});
}
</script>