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失真了,看着真难受…
能够调整半径参数来修改当前的弧线,很明显,第一条切线不够长,是得弧线不能相切,因此进行了补全,因此在绘制过程当中,要注意第一条切线的位置,而后注意起始坐标,我这不是截漏了,是原本就是超出了画布,因此在绘制过程当中,要注意起始位置与半径