canvas理解

canvas 是一个行内块 html5 中的新标签 （在js里写）

有默认的宽高 300 * 150，相当于一个画板和画布 的合体 ，是要在canvas 这个区域中绘制自己想要的东西（考虑兼容问题 最少兼容到 ie 8）

 

1.获取canvas 对象 也就是 画布

var mycanvas =document.getElementsByTagName("canvas")[0];

2.通过 画布获取当前画布所对应的画布对象 绘制的是2d 效果

var ctx = mycanvas.getContext("2d");

注意：通过那个画布获取的画笔对象就想那个画布上绘制内容

3.开始绘制

①画笔下落点

（x y） 相对于是 画布的位置 默认的0,0,画布的左上角

ctx.moveTo(100,100);

②画笔走过的轨迹 （x ， y）；

ctx.lineTo(100,200);

ctx.lineTo(200,100);

ctx.lineTo(100,100);

 

③注意 不是 绘制完线了之后就有效果 需要绘制出来

ctx.stroke(); // 描边 默认的颜色是个黑色

或者

ctx.fill(); //填充 默认填充是个黑色

④画笔的样式设置（一般写在①前面）

//改变线条的粗细 改变画笔的粗细

ctx.lineWidth =15;

// 设置画笔的颜色 但是 要注意 样式与实际画笔相对一 后面的值是string 类型 任意一套颜色设置都生效

 

ctx.fillStyle="red"; //填充颜色

ctx.strokeStyle="yellow";//描边颜色

注意：当有填充颜色时会把描边的宽占一半（绘制压线问题）

⑤两端样式（一般写在①前面）

ctx.lineCap = "butt"//默认

ctx.lineCap = "round"// 两端补齐半圆

ctx.lineCap = "square"//两端补齐方块

⑥折角样式（一般写在①前面 比其他写得要更前）

ctx.beginPath();

//开启新的路径（状态） 也就是抬起画笔 当设置不同的样式的时候就需要抬起画笔 （后面的样式与前面的样式不同的时候也需要抬起画笔）

⑦路径封闭

ctx.closePath();

// 径一个路径封闭的方法 ,不用正在寻找到初始值

⑧ 画矩形自己的方法

x, y, 表示要从那个点开始画矩形 w, h 矩形的宽度 高度

ctx.rect(150,100,100,200);

// ctx.fill();

ctx.stroke();

绘制矩形简化写法

 

// ctx.strokeRect(100,100,200,200);

ctx.fillRect(100,100,200,200);

 

⑨清除 和 绘制矩形很相似

清除一个矩形 x， y w ，h

ctx.clearRect(50,50,50,50)

 

⑩绘制圆 变量名.arc（ x, y ,r ,startr,endr, 顺/逆时针）

顺时针：flase；

逆时针：true；

PI=π=180°

这里的弧度单位不是deg 而是弧度单位 Math.PI 的弧度制是180

ctx.arc(250,250,200,0,Math.PI*2 ,true);

pass：

Math 就是一个数学对象

console.log(Math.floor(1.5))//向下取正

console.log(Math.random())//随机值

console.log(Math.PI)//π值

 

设置canvas的大小

因为是行内块元素 1 通过样式 2 属性

注意问题：

问题： 当设置 canvas的时候 不能使用样式的方式设置 会出现拉伸的效果，要使用 属性的方式设置，即行内

开关原理 ：1 定义一个变量 2 判断当前变量值 3 变量进行切换