canvas基础

一.canvas

1.canvas基本用法:

canvas是h5的一个新标签，画布标签

语法:

<canvas width='200' height='200'>

您的浏览器不支持canvas，请升级

</canvas>

canvas元素创建一个固定大小的画布，公开了一个或多个图形上下文(渲染图像的一个对象)，图形上下文，可以绘制和处理要展示的内容，图形上下文有两分钟，2D和3D，主要学习2D，3D上下文，兼容性太差，webGL就是3D上下文

注意:canvas元素宽高只能在元素内部设置宽高

使用方式:

1.获取元素

var canvas=document.getElementById('canvas')

2.获取上下文

var ctx=convas.getContext('2d');

使用ctx的各种方法进行绘制，使用的不是canvas的方法

eg:

ctx.fillRect();

ctx.arc();

2.矩形

基本语法:

1.//绘制实心矩形

ctx.fillStyle='cyan';//填充色

ctx.fillRect(10,10,50,20);//绘制

2.//绘制空心矩形

ctx.strokeStyle='green';//边框色

ctx.lineWidth='4'//边框宽度(笔触宽度)

ctx.strokeRect(70,10,50,20)

参数含义:

参数一:矩形的X值，距左边距离

参数二:矩形的y值，距上边距离

参数三:矩形的宽度

参数三:矩形的高度

3.路径

路径:路线，路径是没有fill的，只有stroke，没有填充，只有描边，但是如果路径封闭，就可以给封闭的空间，添加填充色

//开始路径

ctx.beginPath();

//将绘制起始点移动到50,50位置

ctx.moveTo(50,50);

//开始连线，绘制一条50,50到300,50

ctx.lineTo(300,50);

//继续连线，绘制一条300,50到250,100

ctx.lineTo(250,100);

//继续连线，绘制一条250,100到100,100

ctx.lineTo(100,100);

//闭合路径

ctx.closePath()

//笔触颜色

ctx.strokeStyle='red';

//笔触宽度

ctx.lineWidth='3';

//空心渲染

ctx.stroke();

//闭合图形内部填充色

ctx.fillStyle='green';

//实心渲染

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.font='bold 20px 微软雅黑';

ctx.fillStyle='red';

ctx.fillText('hello word',180,180);

6.绘制图片

语法:

ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

参数1:要被绘制的图片

参数2,3:要绘制图片的切片位置

参数4,5:绘制图片切片大小

参数6,7:姜切片在画布上展示的位置

参数8,9:切片在画布上展示的大小

7.擦除画布内容

ctx.clearRect(x,y,w,h);

参数1,2:从哪个位置开始擦除

参数3,4:擦除多大区域

常用的

ctx.clearRect(0,0,canvas.width,canvas.height);

二.canvas动画原理

图片绘制在画布上，也就是被画布像素化，一个元素要运动必须擦除，重新绘制

原理:绘制一帧->擦除->重绘->重绘...

总结:画布上的内容，都是像素化的，但是我们可以通过一个js变量一直持有一个对象，更改这个对象的属性，然后重新绘制这个对象，实现运动效果

我们可以使用面向对象的思维去设计canvas

每一个对象必须有的方法:update，