2020-10-27 canvas

最新推荐文章于 2022-05-21 23:55:20 发布

樱花树下'

最新推荐文章于 2022-05-21 23:55:20 发布

阅读量168

点赞数

文章标签： canvas js

本文链接：https://blog.csdn.net/html_xiaojiu/article/details/109317599

版权

一，canvas

1.什么是canvas？

      (1)canvas时候一种h5出的一个标签
      (2)内部 用js来操作提供的功能，进行图形的绘制
      (3)可以做游戏开发，webvr，即时交互的产品  数据图形结合的产品 例如 大数据可视化的页面 柱状图 饼状图 折线图等
      (4)类似与canvas 还有flash（目前很少应用此技术了） 和svg（也是一个标签）
      (5)cavas 的width 和height 与css设置它的width和height 有什么区别?
            1.一个是图片编码像素点的宽高  一个是显示到渲染树页面上的显示效果的宽高
		    2.一个代表的就是图片的内存(不能完全代表) 一个是绘制的时候的区域,具体要看保存下来的图片大小
      (6)canvas可以理解为js操纵之后产生的图片

2canvas的基本操作。

（1）绘制一个简单全等三角形

 var cav = document.querySelector("canvas").getContext("2d")
        console.log(cav);//CanvasRenderingContext2D 
        cav.moveTo(0,200);
        cav.lineTo(200,200);
        cav.strokeStyle = "red"
        cav.stroke();

        cav.moveTo(200,200);
        cav.lineTo(100,200-173.2050);
        cav.stroke();

        cav.moveTo(100,200-173.2050);
        cav.lineTo(0,200);
        cav.stroke();

注意:我们需要得到canvas下面的CanvasRenderingContext2D 对象才可以对canvas进行操作需要调用stroke（）才可以进行绘制。画全等先画下面一条直线，然后在得到顶点比较好画不然没得效果。
在这里插入图片描述

2.折线图的绘制

（1）context是上下对象，不同的操作需要不同的上下文对象，上就是上层代码，下就是底层代码

 <canvas width="400px" height="400px" style="border: 1px solid red;"></canvas>
    <script>
      let pen = document.querySelector("canvas").getContext("2d");
       //contxet 上下文问对象  上就是上层语言代码  下就是底层语言的代码
      for(let i = 10;i<400;i+=10){
          pen.moveTo(0,i)
          pen.lineTo(400,i)
          pen.stroke();
      }
      
      for(let i = 10;i<400;i+=10){
          pen.moveTo(i,0)
          pen.lineTo(i,400)
          pen.stroke();
      }

      var date = []
      for(let i = 0;i<41;i++){
          date.push(Math.round(Math.random()*(120-60)+60))
      }
           pen.beginPath()
          pen.moveTo(0,200)
          date.forEach((el,index) => {
              pen.lineTo(index*10,(400-el*3))
              pen.strokeStyle = "red"
              pen.lineWidth = 3
          });
            
            pen.stroke()
    </script>

注意：代码中前面的两个for循环是对网格的绘制。下面的操作是将随机产生的数据加到一个数组中，在对数组中的数据进行遍历取出绘制在canvas上。pen.beginPath()开启新绘制， pen.lineWidth = 3线宽的设置。date.push(Math.round(Math.random()*(120-60)+60))随机在范围中取值的一个公式。
在这里插入图片描述

3.横向柱状图的绘制。

（1）目的将数据转化为直观的柱状图
（2）注释部分是直接进行的代码绘制不利于业务的书写方式

   <canvas width="650px" height="600px" style="border:2px solid black"></canvas>
    <script>
             let arr = [23000,24000,18000,20000,12000,25000]

             var canvas = document.querySelector("canvas").getContext("2d")
                //  canvas.rect(0,0,500,40)
                //  canvas.rect(0,100,300,40)
                //  canvas.rect(0,200,350,40)
                //  canvas.rect(0,300,400,40)
                //  canvas.rect(0,400,450,40)
                //  canvas.fillStyle="red"
                //  canvas.fill()
                //  canvas.stroke();


            let newarr = [...arr].sort();
            let bili = 600/newarr[newarr.length-1]
                console.log(bili)
                console.log(newarr)
             
            arr.forEach((el,index) => {
                canvas.rect(0,index*100,el*bili,40)
                canvas.fillStyle="red"
                 canvas.fill()//这个和fillstyle要一起用不然没得效果
                 canvas.fillText(`${el}`,el*bili,index*100+25)
                 canvas.stroke();
              
            });
    </script>

注意： let newarr = […arr].sort();排序由大到小因为会改变原数组所以不用原数组调用。后面还要用到原数组。let bili = 600/newarr[newarr.length-1]比例计算，使绘制的更好看，排版更好。 canvas.fillStyle="red“ canvas.fill()//这个和fillstyle要一起用不然没得效果
在这里插入图片描述

4.饼状图的绘制。

（1）我用的是最笨的办法来书写

  <canvas width="600px" height="600px" style="border: 2px solid red;"></canvas>
    <script>
        let arr = [100,500,200,300]
          let canvas = document.querySelector("canvas").getContext("2d");
              let deg = Math.PI/180;

              canvas.beginPath()
              canvas.moveTo(200,200) 
              canvas.arc(200,200,150,0,(100/1100*360)*deg)
              canvas.lineTo(200,200)
              canvas.fillStyle ='#'+Math.random().toString(16).substr(-6);
              canvas.fill()
              canvas.stroke();

              canvas.beginPath()
              canvas.moveTo(200,200) 
              canvas.arc(200,200,150,(100/1100*360)*deg,(500/1100*360)*deg+(100/1100*360)*deg)
              canvas.lineTo(200,200)
              canvas.fillStyle = '#'+Math.random().toString(16).substr(-6);
              canvas.fill()
              canvas.stroke();

              canvas.beginPath()
              canvas.moveTo(200,200) 
              canvas.arc(200,200,150,(500/1100*360)*deg+(100/1100*360)*deg,(200/1100*360)*deg+(500/1100*360)*deg+(100/1100*360)*deg)
              canvas.lineTo(200,200)
              canvas.fillStyle ='#'+Math.random().toString(16).substr(-6);
              canvas.fill()
              canvas.stroke();
            

              
              canvas.beginPath()
              canvas.moveTo(200,200) 
              canvas.arc(200,200,150,(200/1100*360)*deg+(500/1100*360)*deg+(100/1100*360)*deg,(200/1100*360)*deg+(500/1100*360)*deg+(100/1100*360)*deg+(300/1100*360)*deg)
              canvas.lineTo(200,200)
              canvas.fillStyle ='#'+Math.random().toString(16).substr(-6);
              canvas.fill()
              canvas.stroke();
    </script>

注意：
（1） canvas.fillStyle = ‘#’+Math.random().toString(16).substr(-6);随机颜色的获取不用记得网上都有
（2） let deg = Math.PI/180;弧度制转换canvas.arc(200,200,150,0,(100/1100*360)*deg)对应圆心，半径，起始弧度。结束弧度。
（3）第一个结束后后一个的结束弧度要加上之前的不然会重叠！！！！！！！！
在这里插入图片描述

5五角星的绘制

<canvas width="600px" height="600px" style="border: 2px solid red;"></canvas>
    <script>
          let canvas = document.querySelector("canvas").getContext("2d");
              let deg = Math.PI/180;
             
            //   思路 1首先的找到五个角的坐标
            //          1.-90度那个角开始
            //          2.顺时针开始每加一个72度得到一个角的度数
            //        2连接起来就是五角心了
            // let r;
            // canvas.arc(300,300,200,0,360*deg)
            // canvas.stroke()
            p1 = [300,300-200]
            p2 = [300+200*(Math.cos((-90+72*1)*deg)),300+200*(Math.sin((-90+72*1)*deg))]
            p3 = [300+200*(Math.cos((-90+72*2)*deg)),300+200*(Math.sin((-90+72*2)*deg))]
            p4 = [300+200*(Math.cos((-90+72*3)*deg)),300+200*(Math.sin((-90+72*3)*deg))]
            p5 = [300+200*(Math.cos((-90+72*4)*deg)),300+200*(Math.sin((-90+72*4)*deg))]

           
            canvas.moveTo(p1[0],p1[1])
            canvas.lineTo(p3[0],p3[1])
            canvas.lineTo(p5[0],p5[1])
            canvas.lineTo(p2[0],p2[1])
            canvas.lineTo(p4[0],p4[1])
            canvas.lineTo(p1[0],p1[1])
            canvas.stroke();
    </script>

注意：我们把-90当成是起始度数依此加72度*deg就是弧度再用sin cos就可以算坐标了
在这里插入图片描述

樱花树下'

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2020-10-27 canvas

一，canvas1.什么是canvas？ (1)canvas时候一种h5出的一个标签 (2)内部用js来操作提供的功能，进行图形的绘制 (3)可以做游戏开发，webvr，即时交互的产品数据图形结合的产品例如大数据可视化的页面柱状图饼状图折线图等 (4)类似与canvas 还有flash（目前很少应用此技术了）和svg（也是一个标签） (5)cavas 的width 和height 与css设置它的width和height 有什么
复制链接

扫一扫