• Canvas画布


     canvas

       使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识。<canvas> 元素不被一些老的浏览器所支持,但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the fly)。
    • canvas的默认宽高为:300x150
    • canvas在设置宽高时不能够使用css来设置宽高,如果使用css来设置宽高,那么图像会缩放,不会变大
    • 如果浏览器不支持canvas,会显示canvas标签之间的内容
    • 得到上下文对象时,一般我们传入的是“2d”,2d指的是可以绘制平面图形,如果在绘制3d图形,传入“webgl”
    • 通过getContext方法得到一个CanvasRenderingContext2D对象,这个对象就是操作canvas的一个上下文对象(工具集)。
    • 如果给canvas在js代码中重新设置宽高,将来canvas中的内容会被清空
    canvas的API:
        方法:
    • getContext("2d"):得到上下文对象
    • moveTo():将画笔移动到某一点
    • lineTo():确定要连接的另一点
    • stroke():将以上所有的路径连接起来
    • fill():将以上所有的路径组成的图形填充起来
      <canvas id="cas">
              如果浏览器不支持canvas,会显示这段内容
          </canvas>
          <script>
              //1.0得到canvas对象
              var cas = document.getElementById("cas");    
              //1.1给画布设置宽高:
              cas.width = 600;
              cas.height = 300;
              //2.0得到绘制上下文对象
              var ctx = cas.getContext("2d");
              //3.0将点移动到100,100位置
              ctx.moveTo(100,100);//将画笔移动到100,100的位置
              //4.0将线的终点也标记出来
              ctx.lineTo(200,100);//标记另一点200,100并且记录,将来以上两点要用线连接起来
              //5.0将所有的描点链接起来
              ctx.stroke();
          </script>

      非零环绕原则:

    • closePath:将所有的路径闭合起来
    • setLineDash():用来设置虚线(它里面要传入一个参数,参数的类型是数组)
    • getLineDash():得到传入的虚线数组
      <canvas id="cas"></canvas>
          <script>
              //1.0得到canvas对象
              var cas = document.getElementById("cas");
              //2.0设置宽高
              cas.width = 600;
              cas.height = 600;
              //3.0得到上下文对象
              var ctx = cas.getContext("2d");
              ctx.moveTo(100,100);
              ctx.lineTo(500,100);
              ctx.lineTo(500,500);
              ctx.lineTo(100,500);
              ctx.closePath();
      
              ctx.moveTo(250,250);
              ctx.lineTo(250,350);
              ctx.lineTo(350,350);
              ctx.lineTo(350,250);
              ctx.closePath();
      
              ctx.stroke();
              ctx.fill();
          </script>
        属性:
    • lineWidth:设置路径的宽度
    • lineDashOffset:设置虚线的偏移距离
    • strokeStyle:设置线段描   边的颜色
    • fillStyle:  设置路径所围区域的颜色
      <canvas id="cas"></canvas>
          <script>
              //1.0得到canvas对象
              var cas = document.getElementById("cas");
              //2.0设置宽高
              cas.width = 600;
              cas.height = 300;
              //3.0得到上下文对象
              var ctx = cas.getContext("2d");
              ctx.moveTo(250,100);
              ctx.lineTo(350,100);
              ctx.lineTo(350,200);
              ctx.lineTo(250,200);
              ctx.closePath();
      
              ctx.lineWidth = 20;
              // ctx.strokeStyle = "red";
              // ctx.strokeStyle = "#0f0";
              ctx.strokeStyle = "rgb(0,0,255)";
              ctx.fillStyle = "pink";
      
              ctx.stroke();
              ctx.fill();
          </script>
    1. 绘制一个折线图
      <canvas id="cas"></canvas>
          <script>
              //1.0得到canvas对象
              var cas = document.getElementById("cas");
              //2.0设置宽高
              cas.width = 600;
              cas.height = 600;
              //3.0得到上下文对象
              var ctx = cas.getContext("2d");
              //4.0绘制坐标系
              var paddingTop;
              var paddingBottom;
              var paddingRight;
              var paddingLeft;
              var arrW = 10;
              var arrH = 26;
              paddingTop = paddingBottom = paddingRight = paddingLeft = 30;
              var x0 = paddingLeft;
              var y0 = cas.height - paddingBottom;
              //4.1绘制轴线
              ctx.beginPath();
              ctx.moveTo(x0,paddingTop);
              ctx.lineTo(x0,y0);
              ctx.lineTo(cas.width - paddingRight,y0);
              ctx.stroke();
      
              //4.2绘制箭头
              ctx.beginPath();
              ctx.moveTo(x0,paddingTop);
              ctx.lineTo(x0 - arrW / 2 , paddingTop + arrH);
              ctx.lineTo(x0 , paddingTop + arrH / 2);
              ctx.lineTo(x0 + arrW / 2 , paddingTop + arrH);
              ctx.closePath();
      
              ctx.moveTo(cas.width - paddingRight,y0);
              ctx.lineTo(cas.width - paddingRight - arrH , y0 - arrW / 2);
              ctx.lineTo(cas.width - paddingRight - arrH / 2 , y0);
              ctx.lineTo(cas.width - paddingRight - arrH , y0 + arrW / 2);
              ctx.closePath();
              ctx.fill();
              //4.3绘制坐标上的小点:
              var l = 8;
              var points = [[10,10],[15,30],[30,5],[50,8],[55,40]];//二维数组。
              for(var i =  0 ; i < points.length ; i ++ ) {
                  //取出对应点的x,y
                  var pX = points[i][0];
                  var pY = points[i][1];
                  //将圆点由自己的圆点切换成画布的左上角
                  pX = x0 + points[i][0];
                  pY = y0 - points[i][1];
                  //根据x,y绘制小点(绘制一个矩形)
                  ctx.beginPath();
                  ctx.lineWidth = 4;
                  ctx.moveTo(pX - l / 2,pY - l / 2);
                  ctx.lineTo(pX + l / 2,pY - l / 2);
                  ctx.lineTo(pX + l / 2,pY + l / 2);
                  ctx.lineTo(pX - l / 2,pY + l / 2);
                  ctx.closePath();
                  ctx.stroke();
      
              }
          </script>
    2. 绘制矩形:
        canvasRenderingContext2D.rect(x,y,width,height);//绘制矩形
            x,y起点的坐标
            width,height矩形对应的宽高
            这个方法只会设置矩形的路径,不会进行填充或者是描边(不建议使用这个方法因为它如果要填充或者是描边,还需要借助:fill(),stroke();
        canvasRenderingContext2D.strokeRect(x,y,width,height);:
            作用:描边一个矩形
        canvasRenderingContext2D.fillRect(x,y,width,height);
            作用:填充一个矩形
        canvasRenderingContext2D.clearRect(x,y,width,height);
            作用:清除一个矩形区域
    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 600;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0直接使用canvas中的方法来绘制矩形:(100,100),200,100
            ctx.rect(100,100,200,100);
            // ctx.stroke();
            ctx.fill();
            ctx.strokeRect(100,250,200,100);
            ctx.fillRect(100,400,200,100);
            //清除一个矩形区域:
            ctx.clearRect(120,120,50,50);
            ctx.clearRect(200,150,80,300);
            ctx.clearRect(0,0,cas.width,cas.height);
            // cas.width = width;
            // cas.height = height;
        </script>
      3.绘制圆弧:
        canvasRenderingContext2D.arc(x,y,radius,beginAngle,endAngle,anticlockwise);
            作用:绘制一段圆弧
            参数:
                x,y绘制圆弧的起始坐标
                radius:圆弧的半径
                beginAngle:开始的弧度(不是角度)
                endAngle:结束的弧度(不是角度)
                anticlockwise:判断是否是逆时针(这个参数是可选参数,默认值为false,说明绘制方法是顺时针绘制,如果设置为true,那么绘制方法改为逆时针)
            注意:
                1)arc需要配合fill或者是stroke方法来进行绘制
                2)arc方法的0度角是水平向右
                3)arc方法要配合moveTo方法来使用
    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 600;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0绘制一个圆
            ctx.arc(300, 300, 100, 0, 2 * Math.PI);
            ctx.stroke();
        </script>
    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 600;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0使用arc方法来绘制一个圆形
            // ctx.arc(300,300,100,0,2*Math.PI);
            // ctx.stroke();
            //角度转弧度:
            function toRadian( angle) {
                return angle * Math.PI / 180;
            }
            //弧度转角度:
            function toAngle (radian) {
                return radian * 180 / Math.PI;
            }
            //4.1绘制一个圆弧
            ctx.moveTo(300,300);
            ctx.arc(300,300,100,0, toRadian(90));
            ctx.closePath();
            ctx.stroke();
        </script>
        canvasRenderingContext2D.arcTo(x,y,x1,y1,radius):
            作用:绘制一段与线段相切的圆弧
            参数:
                x,y起点坐标
                x1,y1终点坐标
                radius:半径
    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 300;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0绘制一段与线段相切的圆弧
            var r = 50;
            ctx.moveTo(20,20);
            ctx.arcTo(170,20,170,70,r);
            ctx.lineTo(170,170);
            ctx.stroke();
        </script>

      圆角矩形

    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 300;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0绘制四条不相交的线段
            ctx.moveTo(100,100);
            ctx.lineTo(300,100);
            ctx.arcTo(90,100,90,110,10);
            ctx.moveTo(310,110);
            ctx.lineTo(310,210);
            // ctx.arcTo(310,100,310,110,10);
            ctx.arcTo(310,100,300,100,10);
            ctx.moveTo(300,220);
            ctx.lineTo(100,220);
            ctx.arcTo(310,220,310,210,10);
            ctx.moveTo(90,210);
            ctx.lineTo(90,110);
            ctx.arcTo(90,220,100,220,10);
            ctx.stroke();
        </script>

      4.绘制文本

        canvasRenderingContext2D.strokeText(text, x, y);
            作用:在页面上绘制一段文本(将文本进行描边)
            参数:
                text:绘制的文本
                x,y文本绘制的位置
            注意:
                1)默认情况下绘制出来的文本会靠近点的右上方显示
                2)strokeText是空心的,fillText是实心的
    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 300;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0在canvas中绘制Hello Wrold
            var str = "Hello World";
            var x = 100;
            var y = 100;
            ctx.font = "30px '楷体'";
            ctx.strokeText(str,x,y);
            ctx.arc(x,y,2,0,2*Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.fillText(str,x,y + 100);
            ctx.arc(x,y + 100,2,0,2*Math.PI);
            ctx.stroke();
        </script>

        canvasRenderingContext2D.fillText(text, x, y);

            作用:在页面上绘制一段文本(将文本进行填充)
        CanvasRenderingContext2D.textAlign:
            作用:设置文本水平方向上的位置
            取值:
                left:默认
                right:靠右显示
                center:居中显示
        CanvasRenderingContext2D.textBaseline
            作用:设置文本垂直方向上的位置
            取值:
                baseLine:
                middle:
                bottom:
                top:
        CanvasRenderingContext2D.measureText():
            作用:得到一个对象,这个对象可以帮助我们得到文本的宽度。
    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 600;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0在canvas中绘制Hello Wrold
            var str = "Hello World";
            var x = 300;
            var y = 100;
            ctx.font = "18px '楷体'";
            //设置文本水平方向上的位置:textAlign
            // ctx.strokeText(str,x,y);
            // ctx.moveTo(x,0);
            // ctx.lineTo(x,300);
            // ctx.stroke();
            // ctx.beginPath();
            // ctx.textAlign = "right";
            // ctx.strokeText(str,x,y+50);
            // ctx.beginPath();
            // ctx.textAlign = "center";
            // ctx.strokeText(str,x,y+100);
            //设置文本垂直方向上的位置:textBaseline
            // ctx.beginPath();
            // ctx.moveTo(0,300);
            // ctx.lineTo(600,300);
            // ctx.stroke();
            // ctx.fillText(str, 0 ,300);
            // //top, middle, bottom
            // ctx.beginPath();
            // ctx.textBaseline = "top";
            // ctx.fillText(str, 150,300)
            // ctx.beginPath();
            // ctx.textBaseline = "middle";
            // ctx.fillText(str, 300,300)
            ctx.beginPath();
            ctx.textBaseline = "bottom";
            ctx.fillText(str, 450,300)
            //得到文本的宽度:
            var size = ctx.measureText(str);
            alert(size.width)
        </script>

     

      5. 绘制图形
      如果要绘制图片,必须先得到一张图片,得到图片的方式有两种:
      第一种:直接从dom元素中取
      第二种:使用new关键字new出来
        CanvasRenderingContext2D.drawImage( img, dx, dy )

    作用:在canvas中绘制一张图片

      参数
        img:要绘制的图片对象
        dxdy:图片在canvas中的绘制位置
        CanvasRenderingContext2D.drawImage( img, dx, dy , dWidth, dHeight )

    <canvas id="cas"></canvas>
        <!-- <img src="imgs/1.jpg" alt="" id="img"> -->
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 600;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0绘制一张图片
            //4.1得到图片对象的第一种方式
            // var img = document.getElementById("img");
            // //如果要绘制这张图片必须保证图片已经被正常加载出来了
            // img.onload = function(){
            //     //4.2使用drawImage方法绘制图片
            //     ctx.drawImage(img, 100, 100);
            // }
            //4.2得到图片对象的第二种方式
            var img = new Image();//创建一个图片对象
            img.src = "imgs/1.jpg";//给对象添加一个路径属性,将来这张图片就是这个路径下面的图片
            img.onload = function(){
                ctx.drawImage(img,200,200);
            }
        </script>

      

      作用:在canvas中绘制一张图片
      参数
        img:要绘制的图片对象
        dxdy:图片在canvas中的绘制位置
        dWidth, dHeight:给绘制图片设置宽高
        CanvasRenderingContext2D.drawImage( img, sx, sy, sWidth, sHeight, dx, dy , dWidth, dHeight )
      

    canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 600;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0得到图片对象
            var img = new Image();
            img.src = "imgs/2.jpg";
            img.onload = function(){
                ctx.drawImage(img,0,0,600, 600 * this.height / this.width);
            }
    
        </script>

    作用:在canvas中绘制一张图片
      参数
        img:要绘制的图片对象
        sx,sy:从要绘制图片中裁剪的图片起始坐标
        sWidth,sHeight:从要绘制的图片中裁剪的图片宽高
        dxdy:图片在canvas中的绘制位置
        dWidth, dHeight:给绘制图片设置宽高

    <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 600;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0得到一个图片对象
            var img = new Image();
            img.src = "imgs/2.jpg";
            img.onload = function(){
                // ctx.drawImage( img, 719, 264, 43, 75, 100, 100, 200, 200 * 75 / 43);
                ctx.drawImage(img, 719 , 264, 43, 75, 100, 100, 43, 75);
            }
    
        </script>

      6. 变换
      在canvas中如果要绘制图形,坐标系起着至关重要的作用。在canvas中为了能够绘制出更多图形来,canvas为我们准备一系列的变换方法。
      作用:可以使用变换帮助我绘制更多类型的图形。

      translate(); 平移变换
      scale(); 伸缩变换
      rotate(); 旋转变换
      变换以后的坐标系会影响后面结构

    <canvas id="cas"></canvas>
        <script>
            //角度转弧度:
            function toRadian(angle) {
                return angle * Math.PI / 180;
            }
            //弧度转角度
            function toAngle (radian) {
                return radian * 180 / Math.PI;
            }
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 300;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //4.0在canvas中心绘制一个矩形
            //4.1将坐标平移到画布中心位置
            ctx.translate( cas.width / 2, cas.height / 2);
            //4.2绘制矩形
            var l = 100;
            var x = -l / 2;
            var y = -l / 2;
            var angle = 2;
            var speed = 1000;
            setInterval(function() {
                //先清除画布内容
                ctx.clearRect( -cas.width / 2, -cas.height / 2, cas.width, cas.height);
                //旋转
                ctx.rotate(toRadian(angle));
                //绘制矩形
                ctx.strokeRect( x, y, l, l);
                // angle ++;
            }, 1000 / speed);
        </script>

      7. 状态的保存和恢复

      在canvas中所有的状态属性都会一直保存下去,影响下面代码的样式,所以为了 解决这个问题,我们可以进行状态的保存的恢复。

      save(); //将之前的状态保存起来
      restore(); //将上一次保存的状态恢复过来

        <canvas id="cas"></canvas>
        <script>
            //1.0得到canvas对象
            var cas = document.getElementById("cas");
            //2.0设置宽高
            cas.width = 600;
            cas.height = 300;
            //3.0得到上下文对象
            var ctx = cas.getContext("2d");
            //当代码运行到这里的时候,我们的canvas中属性的状态,全部是默认的
            //我希望在这里把所有的默认状态全部保存起来
            ctx.save();
            //4.0绘制一个矩形(描边红色,填充绿色,线宽10)
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.strokeStyle = "blue";
            ctx.lineWidth = 10;
            ctx.rect(100,100,100,100);
            ctx.stroke();
            ctx.fill();
            //当代码运行到这里的时候,我们的canvas中属性的状态被修改了
            //我们希望在这里把之保存的状态恢复过来
            ctx.restore();
            //5.0绘制第二个矩形(所有样式我都希望是默认的)
            ctx.beginPath();
            ctx.rect(300,100,100,100);
            ctx.stroke();
            ctx.fill();
        </script>
  • 相关阅读:
    【BZOJ5137】Standing Out from the Herd(后缀自动机)
    【BZOJ1564】【NOI2009】二叉查找树(动态规划)
    仙人掌&圆方树学习笔记
    【CF487E】Tourists(圆方树)
    【BZOJ2125】最短路(仙人掌,圆方树)
    【BZOJ4818】序列计数(动态规划,生成函数)
    【BZOJ1023】仙人掌图(仙人掌,动态规划)
    【BZOJ4316】小C的独立集(仙人掌,动态规划)
    【BZOJ4316】小C的独立集(动态规划)
    【BZOJ3240】【NOI2013】矩阵游戏(数论)
  • 原文地址:https://www.cnblogs.com/chrischan/p/7003772.html
Copyright © 2020-2023  润新知