canvas绘图详解+demo解释

canvas使用示例：

<script>

    //1、获取canvas标签

    var canvas=document.querySelector("canvas");

    //2、获取绘图上下文(工具箱)

    var ctx=canvas.getContext("2d");//CanvasRenderContext2d

    //3、指定绘制的起点

    ctx.moveTo(50,50);//x轴坐标、y轴坐标

    //4、指定直线的终点

    ctx.lineTo(500,50);

    //5、描边

    ctx.stroke();

</script>

canvas重要的属性：

 ctx.closePath(); //将绘制的终点和绘制的起点连接起来

 ctx.strokeStyle=color;//通过strokeStyle属性设置//描边颜色一定要在描边之前设置

beginPath();//通过beginPath()开启一个新的状态，在新状态中，所有的轨迹清空的

示例demo：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    // 默认情况下，所有的绘图都是基于同一个状态的，
    // 如果在某一段代码中多次调用了 stroke 方法，会将当前状态下的已经产生的轨迹都绘制一遍

    // 举例：先绘制轨迹 a ， stroke; 再绘制轨迹 b ， stroke; 再绘制轨迹 c,stroke;
    //-->a 被绘制了 3 次， b 被绘制了 2 次， c 被绘制了 1 次

    // 解决方案：通过 beginPath() 开启一个新的状态，在新状态中，所有的轨迹清空的
    ctx . moveTo ( 50 , 50 );
    ctx . lineTo ( 300 , 50 );
    ctx . strokeStyle = "red" ;
    ctx . stroke (); // 红色的直线

    ctx . beginPath ();
    ctx . moveTo ( 50 , 80 );
    ctx . lineTo ( 300 , 80 );
    ctx . strokeStyle = "red" ;
    ctx . stroke (); // 红色的直线

    ctx . beginPath ();
    ctx . moveTo ( 50 , 200 );
    ctx . lineTo ( 300 , 200 );
    ctx . strokeStyle = "blue" ;
    ctx . stroke (); // 蓝色的直线


    // 一般来说，在绘制新图形的时候，更多的会习惯性的开启新状态
    // 每次开启新状态的时候，如果没有指定新的状态值 ( 比如：描边色 ) ，将会继承上一状态下的该值
</ script >

.

canvas的lineWidth属性设置线宽

示例demo：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    //lineWidth 设置线宽，默认值为 1 ，从线段的中轴线开始分别向两边延展 1px 的虚影
    ctx . moveTo ( 1 , 1 );
    ctx . lineTo ( 300 , 1 );
    ctx . stroke ();

    // 设置线宽为 2 ，从线段的中轴线卡斯是分别向外延展 1px 的实心
    ctx . beginPath ();
    ctx . moveTo ( 1 , 5 );
    ctx . lineTo ( 300 , 5 );

    ctx . lineWidth = 2 ;
    ctx . stroke ();

    // 设置线宽为 3 ，从线段的中轴线卡斯是分别向外延展 1px 的实心 +1px 的虚影
    ctx . beginPath ();
    ctx . moveTo ( 1 , 10 );
    ctx . lineTo ( 300 , 10 );

    ctx . lineWidth = 3 ;
    ctx . stroke ();

    // 设置线宽为 4 ，从线段的中轴线卡斯是分别向外延展 2px 的实心
    ctx . beginPath ();
    ctx . moveTo ( 1 , 15 );
    ctx . lineTo ( 300 , 15 );

    ctx . lineWidth = 4 ;
    ctx . stroke ();

    // 设置线宽为 5 ，从线段的中轴线卡斯是分别向外延展 2px 的实心 +1px 的虚影
    ctx . beginPath ();
    ctx . moveTo ( 1 , 21 );
    ctx . lineTo ( 300 , 21 );

    ctx . lineWidth = 5 ;
    ctx . stroke ();

    // 设置线宽为 6 ，从线段的中轴线卡斯是分别向外延展 3px 的实心
    ctx . beginPath ();
    ctx . moveTo ( 1 , 30 );
    ctx . lineTo ( 300 , 30 );

    ctx . lineWidth = 6 ;
    ctx . stroke ();

    // 结论：设置线宽
    // 线宽为奇数     从线段的中轴线卡斯是分别向外延展  (n-1)/2 px 的实心 +1px 的虚影
    // 线宽为偶数     从线段的中轴线卡斯是分别向外延展  n/2 px 的实心

</ script >

fill方法会自动闭合路径，并且自动填充。

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    // 完成绘制指定的矩形
    function  rect ( x , y , width , height ){
        ctx . moveTo ( x , y );
        ctx . lineTo ( x + width , y );
        ctx . lineTo ( x + width , y + height );
        ctx . lineTo ( x , y + height );
//        ctx.closePath();

        ctx . fill ();
        ctx . strokeStyle = "red" ;
        ctx . stroke ();
    }

    rect ( 50 , 50 , 300 , 200 );

    // 在 fill 方法内部会自动闭合路径

    ctx . beginPath ();
    ctx . lineTo ( 400 , 50 );
    ctx . lineTo ( 400 , 300 );
    ctx . lineTo ( 500 , 300 );

    ctx . fill ();
</ script >

setLineDash()//设置绘制线条为虚线

示例demo：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . moveTo ( 50 , 50 );
    ctx . lineTo ( 500 , 50 );

    //[]    数组中没有任何元素，绘制出来的还是实线

    //[i]    只有一个元素表示实线部分和空白部分的长度相等，均为 i
    //[i,j]  有 2 个元素，表示 i 为实线部分的长度， j 为空白部分的长度
    //[i,j,g]  有 3 个元素，第一个实线部分长度为 i ，第一个空白部分长度为 j ，第二个实线部分长度为 g ，第二个空白部分长度为 i
    //[i,j,g,s]  有 4 个元素，第一个实线部分长度为 i ，第一个空白为 j ，第二个实线为 g ，第二个空白为 s

    ctx .setLineDash ([ 10 , 5 , 2 , 5 ]);

    ctx . lineWidth = 2 ;
    ctx . stroke ();
</ script >

getLineDash()//这个方法获取上面设置虚线的属性值

示例demo：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . moveTo ( 50 , 50 );
    ctx . lineTo ( 500 , 50 );

    ctx .setLineDash ([ 10 , 5 , 2 , 5 ]);

    // 获取上面设置的虚线的属性值
    // 如果设置的时候数组长度为奇数，打印出来的将是：数组 *2
    //................... 为偶数，打印出来的将是它本身
    console . log ( ctx .getLineDash ());

    ctx . lineWidth = 2 ;
    ctx . stroke ();
</ script >

lineDashOffset //这个属性设置线条从左边出来或者从右边出来的制动的像素

示例demo：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . moveTo ( 50 , 50 );
    ctx . lineTo ( 500 , 50 );

    ctx .setLineDash ([ 10 , 5 ]);

    //lineDashOffset ：
    //1 、值为负数：线条向右出来指定的像素
    //2 、值为正数，线条向左缩进去指定的像素

    ctx . lineDashOffset =- 8 ;
    ctx . stroke ();
</ script >

clearRec()//清除画布，类似于画图工具中矩形选中区域删除

示例demo（跑马灯效果实现）：

< script >
    var  canvas =  document . querySelector ( 'canvas' );
    var  ctx = canvas . getContext ( '2d' );
    setInterval ( function (){
        ctx . beginPath ();
        ctx . clearRect ( 0 , 0 , canvas . width , canvas . height );
        ctx . moveTo ( 50 , 50 );
        ctx . lineTo ( 300 , 50 );
        ctx . lineWidth  =  2 ;
        ctx .setLineDash ([ 10 , 5 , 2 , 5 ]);
        ctx . lineDashOffset -- ;
        ctx . strokeStyle  =  'red' ;
        ctx . stroke ();
    }, 10 );
</ script >

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    //clearRect: 清除矩形区域的内容
    // 参数：矩形区域的左上角顶点 x 、 y ，矩形的宽、高

    // 清空画布的功能
    ctx . clearRect ( 0 , 0 , canvas . width , canvas . height );
</ script >

lineCap  属性设置线帽

示例demo：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . moveTo ( 50 , 50 );
    ctx . lineTo ( 500 , 50 );

    //lineCap 设置线帽

//    ctx.lineCap="round";// 圆形的线帽，相当于给线段左右两边分别加了 2 个半圆

    ctx . lineCap = "square" ;
    ctx . lineWidth = 30 ;

    ctx . stroke ();
</ script >

lineJoin属性设置线段相交时交点定点的样式

示例demo

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . moveTo ( 50 , 50 );
    ctx . lineTo ( 300 , 300 );
    ctx . lineTo ( 500 , 50 );

    ctx . lineWidth = 50 ;

    ctx . lineJoin = "round" ;
//    ctx.lineJoin="bevel";

    ctx . stroke ();
</ script >

综合案例折线图的绘制：

<!DOCTYPE  html >
< html  lang= "en" >
< head >
    < meta  charset= "UTF-8" >
    < title >$Title$ </ title >
</ head >
< body >
< canvas  id= "canvas"  width= "800"  height= "600"  style= " border: 1 px solid red " ></ canvas >
</ body >
< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    var  yTopX =  50 ,  yTopY =  50 ,
            yLength =  500 ,  xLength =  500 ,
            b =  30 ,  h =  30 ;
    var  zeroX=yTopX , zeroY=yTopY+yLength ;

    //1 、绘制 y 轴小三角形
    ctx . moveTo ( yTopX-b/ 2 , yTopY+h ); //p1
    ctx . lineTo ( yTopX , yTopY );
    ctx . lineTo ( yTopX+b/ 2 , yTopY+h ); //p2

    //2 、绘制 y 轴、 x 轴折线
    ctx . moveTo ( yTopX , yTopY );
    ctx . lineTo ( zeroX , zeroY );
    ctx . lineTo ( yTopX+xLength , yTopY+yLength );

    //3 、绘制 x 轴小三角形 (r1-r2-r3)
    ctx . moveTo ( yTopX+xLength-h , yTopY+yLength-b/ 2 );
    ctx . lineTo ( yTopX+xLength , yTopY+yLength );
    ctx . lineTo ( yTopX+xLength-h , yTopY+yLength+b/ 2 );

    ctx . stroke ();

    var  data= [{ x : 50 , y : 250 },{ x : 160 , y : 170 },{ x : 200 , y : 200 },{ x : 280 , y : 155 },{ x : 350 , y : 300 }];

    //data2 保存了每一个数据位于画布中的坐标
    var  data2=data . map ( function ( obj ){
        var  objNew = {};
        objNew . x =zeroX+ obj . x ;
        objNew . y =zeroY- obj . y ;

        return  objNew ;
    });
    console . log ( data2 );

    // 绘制每一个点
    data2 . forEach ( function ( obj ){
        // 以 obj 为中心，绘制边长为 4 的实心小正方形

        var  x = obj . x , y = obj . y ;

        ctx . beginPath ();
        ctx . moveTo ( x - 2 , y - 2 );
        ctx . lineTo ( x + 2 , y - 2 );
        ctx . lineTo ( x + 2 , y + 2 );
        ctx . lineTo ( x - 2 , y + 2 );
        ctx . fill ();
    });

    // 连线
    ctx . beginPath ();
    ctx . moveTo ( zeroX , zeroY );
    data2 . forEach ( function ( obj ){
        ctx . lineTo ( obj . x , obj . y );
    });
    ctx . stroke ();
</ script >
</ html >