一,canvas
1,canvas基本用法
canvas是h5的一个新标签,画布标签
语法:
<canvas width="200" height="200">
您的浏览器不支持canvas,请升级
</canvas>
canvas元素创建一个固定大小的画布,公开了一个或多个图形上下文,(渲染图像的一个对象),图形上下文可以绘制和处理要展示的内容,图像上下文有2种,2D和3D,我们主要学习2D,3D上下文兼容性太差,需要学习vebGL就是3D上下文
注意:canvas元素宽高只能在元素内部设置,不能使用css设置宽高
使用方式:
1,获取元素
var canvas = document.getElementById("canvas");
2,获取上下文
var ctx = canvas.getContext('2d');
使用ctx的各种方法进行绘制,使用的不是canvas的方法
eg:
ctx.fillRect();// 长方形
ctx.arc();//圆
2,矩形
基本语法
1)绘制一个实心矩形
ctx.fillStyle='cyan';//填充色
ctx.fillRect(10,10,50,20);
2)绘制一个空心矩形
ctx.strokeStyle = 'yellow';//边框颜色;
ctx.lineWidth = "4";//笔触宽度
ctx.strokeRect(70,10,50,20);
参数含义:
参数1:矩形的x值,距左边距离
参数2:矩形的y值,距上边距离
参数3:矩形的宽度
参数4:矩形的高度
3,路径
路径:路线,路径是没有fill,只有stroke,没有填充,只有描边,但是如果路径封闭,就可以给封闭的空间添加填充色
eg:
ctx.beginPath();//开始路径
ctx.moveTo(50,50);//将绘制起始点移动到某个位置
ctx.lineTo(300,50); //开始连线,绘制一条50,50到300,50
ctx.lineTo(250,100);//继续连线,绘制一条300,50到250,100
ctx.lineTo(100,100); //继续连线
ctx.closePath(); //关闭路径,闭合路径
ctx.strokeStyle="purple"; //笔触颜色
ctx.lineWidth = '8'; //笔触宽度
ctx.stroke(); //空心渲染
ctx.fillStyle = 'yellow'; //闭合圆形内部填充色
ctx.fill(); //实心渲染
注意:路径结束时必须写fill(),stroke() 才能将路径渲染出来,否则出不来任何内容
4,圆弧
ctx.arc(x,y,r,startAngle,endAngle,t/f);
按照顺时针或逆时针的方向在坐标为(x,y)的位置绘制一个半径为r的圆弧,该圆弧从startAngle角度开始到endAngle角度结束
eg:
ctx.arc(200,200,50,0,2,false);
圆心:(200,200)
半径:50
开始角度:0
结束角度:2
方向:顺时针
5,绘制文本
ctx.fillStyle = 'purple';
ctx.font = 'bold 20px 微软雅黑 ';
ctx.fillText('hello word',180,180);
参数2,3:要绘制图片的切片位置
参数4,5:绘制图片切片大小
参数6,7:将切片在画布上展示位置
参数一:要被绘制的图片
参数2,3:画布上的坐标
参数4,5:画布上的宽高
参数一:要被绘制的图片
参数2,3:将切片在画布上展示位置
ctx.clearRect(x,y,w,h);
参数1,2:从哪个位置开始擦除
参数3,4:擦除多大区域
常用的:
二。canvas动画原理
图片绘制在画布上,也就是被画布像素化,一个元素要运动必须擦除重新绘制
原理:绘制一帧 -> 擦除 -> 重绘 -> 擦除 ->重绘.....
总结:
画布上的内容都是像素化的,但是我们可以通过一个js变量一直持有一个对象,更改这个对象的属性,然后重新绘制这个对象,实现运动效果
我们可以使用面向对象的思维设计canvas
1,canvas基本用法
canvas是h5的一个新标签,画布标签
语法:
<canvas width="200" height="200">
您的浏览器不支持canvas,请升级
</canvas>
canvas元素创建一个固定大小的画布,公开了一个或多个图形上下文,(渲染图像的一个对象),图形上下文可以绘制和处理要展示的内容,图像上下文有2种,2D和3D,我们主要学习2D,3D上下文兼容性太差,需要学习vebGL就是3D上下文
注意:canvas元素宽高只能在元素内部设置,不能使用css设置宽高
使用方式:
1,获取元素
var canvas = document.getElementById("canvas");
2,获取上下文
var ctx = canvas.getContext('2d');
使用ctx的各种方法进行绘制,使用的不是canvas的方法
eg:
ctx.fillRect();// 长方形
ctx.arc();//圆
2,矩形
基本语法
1)绘制一个实心矩形
ctx.fillStyle='cyan';//填充色
ctx.fillRect(10,10,50,20);
2)绘制一个空心矩形
ctx.strokeStyle = 'yellow';//边框颜色;
ctx.lineWidth = "4";//笔触宽度
ctx.strokeRect(70,10,50,20);
参数含义:
参数1:矩形的x值,距左边距离
参数2:矩形的y值,距上边距离
参数3:矩形的宽度
参数4:矩形的高度
3,路径
路径:路线,路径是没有fill,只有stroke,没有填充,只有描边,但是如果路径封闭,就可以给封闭的空间添加填充色
eg:
ctx.beginPath();//开始路径
ctx.moveTo(50,50);//将绘制起始点移动到某个位置
ctx.lineTo(300,50); //开始连线,绘制一条50,50到300,50
ctx.lineTo(250,100);//继续连线,绘制一条300,50到250,100
ctx.lineTo(100,100); //继续连线
ctx.closePath(); //关闭路径,闭合路径
ctx.strokeStyle="purple"; //笔触颜色
ctx.lineWidth = '8'; //笔触宽度
ctx.stroke(); //空心渲染
ctx.fillStyle = 'yellow'; //闭合圆形内部填充色
ctx.fill(); //实心渲染
注意:路径结束时必须写fill(),stroke() 才能将路径渲染出来,否则出不来任何内容
4,圆弧
ctx.arc(x,y,r,startAngle,endAngle,t/f);
按照顺时针或逆时针的方向在坐标为(x,y)的位置绘制一个半径为r的圆弧,该圆弧从startAngle角度开始到endAngle角度结束
eg:
ctx.arc(200,200,50,0,2,false);
圆心:(200,200)
半径:50
开始角度:0
结束角度:2
方向:顺时针
5,绘制文本
ctx.fillStyle = 'purple';
ctx.font = 'bold 20px 微软雅黑 ';
ctx.fillText('hello word',180,180);
6,绘制图片
1)9个参
ctx.drawImages(image,sx,sy,sw.sh,dx,dy,dw,dh);
参数一:要被绘制的图片参数2,3:要绘制图片的切片位置
参数4,5:绘制图片切片大小
参数6,7:将切片在画布上展示位置
参数8,9:切片在画布上展示的大小
2)5个参
参数一:要被绘制的图片
参数2,3:画布上的坐标
参数4,5:画布上的宽高
3)3个参
参数一:要被绘制的图片
参数2,3:将切片在画布上展示位置
将整个图片在画布上的dx,dy坐标完全绘制
7,擦除画布内容
ctx.clearRect(x,y,w,h);
参数1,2:从哪个位置开始擦除
参数3,4:擦除多大区域
常用的:
二。canvas动画原理
图片绘制在画布上,也就是被画布像素化,一个元素要运动必须擦除重新绘制
原理:绘制一帧 -> 擦除 -> 重绘 -> 擦除 ->重绘.....
总结:
画布上的内容都是像素化的,但是我们可以通过一个js变量一直持有一个对象,更改这个对象的属性,然后重新绘制这个对象,实现运动效果
我们可以使用面向对象的思维设计canvas
每一个对象必须有的方法:updata,render
2,动画
一个画布中,不管有多少个元素在运动,都只能有一个定时器进行画布更新,所有元素运动的速度控制根据每一帧运动的距离控制
帧频:fps (frame per second) 每秒多少祯
计算方法:fram / second
定时器时间写-1:说明将定时器设置为最快帧频,除了使用-1让定时器打到计算机最快处理速度,还可以使用requestAnimationFrame 函数达到计算机的最优处理速度
Date.parse(new Date()):获取当前时间戳,单位 秒