H5--canvas--笔记-画笔-直线-矩形-圆-圆弧

canvas学习笔记

1.获取画笔
通过DOM操作获取canvas元素节点之后(变量名为canvas);
let ctx = canvas.getContext(“2d”);
就可以获取canvas的画笔了;
2.画笔的样式
对画笔的操作,也就是调用画笔对象的方法,所以以ctx.开头,方法名是小驼峰

1. 画笔的宽度
   ctx.lineWidth=“4”;
2. 画笔的颜色
   画笔的颜色因为画法的不同,分为两种,一种是描边的颜色(strokeStyle),另一种是填充的颜色(fillStyle);
   颜色使用#16进制表示,
   支持缩写
   当调用ctx.stroke(),描边方法时,这条边就是strokeStyle的颜色;
   当调用ctx.fill(),填充方法时,内部颜色就变成了fillStyle的颜色;

有了画笔的样式,接下来就是动笔了
1.beginPath();开始绘画路径
2.closePath();见名知意,结束路径,这个与其说是结束,不如说是最后一笔,即最后一个坐标点与起始点的连线,如果不加的话,起点和终点之间的连线是不会通过描边画出来的
这两个就像是我们对代码进行函数封装,可以有效的防止画笔的污染
划线
1.lineTo(x,y);
先划线,在执行ctx.stroke()之前是不可见的,需要有个起始点,之后可以以前一个点为起始点
2.moveTo(x,y);
lineTo();的起始点,如果lineTo()之前不设置一个起始点是不能画出来的,(一开始以为会默认原点,删了moveTo()之后直接没了,难受…);

划好线之后,觉得画个正方形有点烦,还要写四个方法,所以官方提供了4个相关的API;
1.画矩形rect();
这个是纯描边的矩形
ctx.rect(起始横坐标,起始纵坐标,宽度,高度);
然后可以描边或者填充;
2.描边/填充矩形
能偷懒就不要多走路,emmm
如果只是一个描边或填充矩形,可以直接用
ctx.strokeRext(参数同rect);
ctx.fillRect(参数同rect);
3.清除指定矩形中的内容!!!
ctx.clearRect();
这个可以有效的帮助我们清空局部或者整个画布

结束矩形之后,就是圆形或弧形了
1.画弧形ctx.arc(圆心横坐标,圆心纵坐标,半径,开始的角度,结束的角度,是否逆时针);

/**
 * @description 画圈圈
 * @param {objext} canvas的画笔
 */
function circularity(ctx){
    //开始绘画
    ctx.beginPath();
    //设置描边的宽度
    ctx.lineWidth='4';
    //设变描边的颜色
    ctx.strokeStyle='#eeeeee';
    //设置填充的颜色
    ctx.fillStyle="#abd234";
    //起始点
    ctx.moveTo(50,50);
    //使用arc方法绘制圆圈
    ctx.arc(50,50,20,-Math.PI/8,Math.PI/8,true);
    //描边
    ctx.stroke();
    //填充
    ctx.fill();
    //结束绘画
    ctx.closePath();
}

2.两条相切的直线间的弧线
arcTo(两条线的交点横坐标,两条线的交点的纵坐标,第二条线上一个点的横坐标,横坐标对应的纵坐标,圆弧的半径)

/**
 * @description 弧线
 */

 function lineArcline(ctx){
    //开始新的绘画路径
    ctx.beginPath(); 
    //画笔起点
    ctx.moveTo(100,20);           
    //画弧线
    ctx.arcTo(150,20,170,50,100);
    //描边
    ctx.stroke();         
 }

关于arcTo的绘图注意点,
1.起点问题
前面一个点如果不是切线的切点,那么arcTo()会补充一条切线出来,所以这里可以偷懒,直接起点之后就可以画弧线了,结尾点的话,需要自己lineTo();
当设置的半径与第一条线的切点超过第一条线原有长度,会自动用画圆弧的画笔补全确实的部分
2.绘画原理
画笔会有一个圆弧起始点,这个起始点是之前设置或者直线画完之后留下的,通过这个点和前面两个参数设定的点坐标,可以确定一条切线,然后1,2参数和3,4参数确定第二条切线.
然后说切线吧,圆的切线与半径是垂直的,所以我们第五个参数(圆弧的半径)设的越小,弧线离两条线交点(第一个和第二个参数设定的点)就越近.
两个垂直的半径的交点就是圆心,然后在这个圆心基础上画出圆弧(.emm不是很确定,如果有问题,望指出);

/**
 * @description 弧线
 */

 function lineArcline(ctx){
     //路径记录
     ctx.beginPath();
     ctx.moveTo(10,20);
     ctx.lineTo(20,20);
     ctx.lineTo(50,50);
     ctx.strokeStyle="#f00";
     ctx.stroke();
     ctx.save();
    //开始新的绘画路径
    ctx.beginPath(); 
    //画笔起点
    ctx.strokeStyle="#000";
    ctx.moveTo(10,20);           
    //画弧线
    ctx.arcTo(20,20,50,50,100);
    //描边
    ctx.stroke();         
 }

放大了500%,所以canvas失真了,看着真难受…
可以调整半径参数来修改当前的弧线,很明显,第一条切线不够长,是得弧线不能相切,所以进行了补全,所以在绘制过程中,要注意第一条切线的位置,然后注意起始坐标,我这不是截漏了,是本来就是超出了画布,所以在绘制过程中,要注意起始位置与半径