canvas基础

一，canvas1,
canvas基本用法
canvas是h5的一个新标签呢，画布标签
语法：
您的浏览器不支持canvas，请升级
canvas元素创建一个固定大小的画布，公开了一个或多个图形上下文(渲染图像的一个对象)，图形上下文可以绘制和处理要展示的内容，图形上下文有2种，2D和3D，我们主要学习2D，3D上下文兼容性太差，webGL就是3D上下文注：canvas元素宽高只能在元素内部设置，不能使用css设置宽高
使用方式：
1) 获取元素：var canvas = document.getElementById(‘canvas’);
2) 获取上下文tvar ctx = canvas.getContext(‘2d’);
使用ctx的各种方法进行绘制，使用的不是canvas的方法
eg：ctx.fillRect();
2, 矩形基本语法：
1) 绘制一个实心矩形
ctx.fillStyle = ‘cyan’;//填充颜色
ctx.fillRect(10,10,50,20);//绘制
2) 绘制空心矩形
ctx.strokeStyle = ‘green’;
ctx.lineWidth=’5’;
ctx.strokeRect(70,10,50,20);
参数含义：
参数1：矩形的x值，距左边距离
参数2：矩形的y值，距上边距离
参数3：矩形的宽度
参数4：矩形的高度
3, 路径
路径：路线，路径是没有fill，只有stroke，没有填充，只有描边，但是如果路径封闭，就可以给封闭的空间添加填充色
注意：路径结束时必须写fill(),stroke()才能将路径渲染出来，否则出不来任何内容
4, 圆弧
ctx.arc(x,y,r,startAngle,endAngle,t/f);
按照顺/逆时针在(x,y)的位置绘制一个半径为r的圆弧，该圆弧从startAngle角度开始到endAngle角度结束
圆心：x
半径：y
开始角度：startAngle
结束角度：endAngle
方向：true 逆时针 / false逆时针
5,绘制图片
ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
* 参数1：要被绘制的图片
* 参数2,3: 要绘制图片的切片位置
* 参数4,5：绘制图片切片大小
* 参数6,7：将切片在画布上展示的位置
* 参数8,9：切片在画布上展示的大小
6,擦除画布内部ctx.clearRect(x,y,w,h);
* 参数1,2：从哪个位置开始擦除
* 参数3,4：擦除多大区域
常用的：
* ctx.clearRect(0,0,canvas.width,canvas.height);

二，canvas动画原理图片绘制在画布上，也就是被画布像素化，一个元素要运动，必须擦除；
重新绘制原理：绘制一帧 -> 擦除 -> 重绘 -> 重绘….
总结：画布上的内容都是像素化的，但是我们可以通过一个js变量一直持有一个对象，更改这个对象的属性，然后重新绘制这个对象，实现运动效果我们可以使用面向对象的思维设计canvas每一个对象必须要有的方法：update。render