canvas 简单的dome 简单的图表

最新推荐文章于 2022-11-27 14:03:04 发布

Thekingyu

最新推荐文章于 2022-11-27 14:03:04 发布

阅读量278

点赞数

分类专栏： js功能文章标签： javascript

本文链接：https://blog.csdn.net/Thekingyu/article/details/121546172

版权

js功能专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>



<head>

  <title>Canvas tutorial</title>

  <style type="text/css">

    #tutorialval {

      /* transform: scaleX(180deg); */

      transform: rotateX(180deg);

    }

  </style>

</head>



<body onload="draw();">

  <canvas id="tutorialvalsdom" width="500" height="300"></canvas>

  <canvas id="tutorialvals" width="500" height="300"></canvas>

  <canvas id="tutorialval" width="500" height="300"></canvas>

  <canvas id="tutorial" width="500" height="400"></canvas>

</body>

<script type="text/javascript">



  let wins = window

  // wins.requestAnimationFrame(painting)

  let i = 0

  let y = 0

  let dep=false

  function anmation() {

    for (let j = 0; j < 4; j++) {

      // console.log(j)

      y = j

      painting()





     

      // for (let t = 0; t < 20; t++) {

      // }

    }

  }



  function painting() {

    var tutorialvalsdom = document.getElementById('tutorialvalsdom');

    var ctx = tutorialvalsdom.getContext('2d');

    ctx.moveTo(10, 10 * y)

    console.log(y)

    ctx.lineTo(i, 10 * y)

    ctx.stroke()

    // console.log(i)

    if (i < 200) {

      window.requestAnimationFrame(painting)

    }else{



    }

    i = i + 1



  }



  function draw() {





    var arr = '11222'

    var tutorialvalsdom = document.getElementById('tutorialvalsdom');

    var canvasvals = document.getElementById('tutorialvals');

    var canvasval = document.getElementById('tutorialval');

    var canvas = document.getElementById('tutorial');




    if (tutorialvalsdom.getContext) {




      anmation()

    }





    // 贝塞尔

    if (canvasvals.getContext) {

      var ctx = canvasvals.getContext('2d');

      ctx.beginPath()

      ctx.moveTo(95, 35)

      ctx.quadraticCurveTo(35, 15, 25, 62.5)

      // ctx.lineTo()

      ctx.quadraticCurveTo(25, 100, 75, 200);

      ctx.quadraticCurveTo(90, 230, 125, 190);

      ctx.lineTo(128, 210)

      ctx.lineTo(131, 190)

      ctx.lineTo(133, 210)

      ctx.lineTo(135, 190)

      ctx.lineTo(138, 210)

      ctx.lineTo(141, 190)

      ctx.quadraticCurveTo(160, 230, 200, 200);

      ctx.lineTo(220, 160)

      ctx.lineTo(225, 140)

      ctx.lineTo(223, 3 + 0)

      // ctx.quadraticCurveTo(100, 100, 75, 50);

      ctx.stroke()

    }









    // 遍历数组表格

    if (canvasval.getContext) {

      var ctx = canvasval.getContext('2d');

      function arrlist(val) {

        console.log(val);

        ctx.beginPath();

        ctx.moveTo(10, 10)

        ctx.lineTo(10, 300)

        ctx.strokeStyle = '#6950a1'

        ctx.stroke()




        ctx.beginPath();

        ctx.moveTo(10, 10)

        ctx.lineTo(500, 10)

        ctx.strokeStyle = '#6950a1'

        ctx.stroke()



        let arr = [{ name: 'cs', val: 5, }, { name: 'cs', val: 6, }, { name: 'cs', val: 3, }, { name: 'cs', val: 1, }, { name: 'cs', val: 8, }, { name: 'cs', val: 1, }, { name: 'cs', val: 2, }, { name: 'cs', val: 3, }]

        // 寻找百分比定义最大高度

        let maxval = 0;

        if (arr) {

          maxval = arr[0].val

        }

        arr.forEach((item, index) => {

          if (maxval < item.val) {

            maxval = item.val

          }

        })




        for (let i = 0; i < arr.length; i++) {

          console.log(arr[i])

          ctx.beginPath();

          ctx.fillStyle = '#1d953f';

          // 计算百分比

          let valper = 280 / maxval;

          // 宽度

          let widthval = 500 / arr.length - 20;

          // 自适应宽度

          let paddingval = 0;

          if (i == 0) {

            paddingval = 10;

          } else {

            paddingval = (20 * (i) + (500 / arr.length - 20) * (i)) + 10;

          }

          // 计算左右相聚  自身宽20 加左边10  固定宽

          // let paddingval = 10*(i+1)  + 20*(i+1);

          // 计算高度

          let hightval = valper * arr[i].val

          // console.log(paddingval,hightval);

          ctx.fillRect(paddingval, 10, widthval, hightval);



        }

        // ctx.beginPath();

        // ctx.fillStyle = '#1d953f';

        // ctx.fillRect(20, 10, 20, 10);



        // ctx.fill()

        // ctx.stroke()




      }

      arrlist(arr)

    }






    if (canvas.getContext) {

      var ctx = canvas.getContext('2d');



      // 一个新的绘画路径

      ctx.beginPath();

      // 颜色修改

      ctx.fillStyle = '#1d953f';

      // 前两位置  后两宽高  fillRect 设置矩形

      ctx.fillRect(100, 100, 100, 100);

      // clearRECT 清除某些区域颜色

      ctx.clearRect(15, 15, 20, 20);

      ctx.strokeRect(20, 20, 10, 10)



      ctx.beginPath()

      ctx.fillStyle = '#6950a1';

      ctx.fillRect(20, 20, 10, 10)



      ctx.beginPath()

      // 形状内颜色

      ctx.fillStyle = '#1d953f';

      // strokeStyle设置边框颜色

      ctx.strokeStyle = '#6950a1';

      // 左 右 半径 起始点  结尾点 false 顺时针  true 逆时针

      // 0->0.5->1>1.5>2

      ctx.arc(150, 99, 50, 1 * Math.PI, 2 * Math.PI, false)

      // 加载fill颜色

      ctx.fill();

      // ？？？应该未形状内颜色渐变

      ctx.globalAlpha = 0.2;

      ctx.fillStyle = 'white'



      // 加载边框颜色

      ctx.stroke();

      ctx.beginPath()

      ctx.arc(150, 99, 40, 1 * Math.PI, 2 * Math.PI, false)

      ctx.fill();



      ctx.beginPath()

      ctx.arc(150, 99, 30, 1 * Math.PI, 2 * Math.PI, false)

      ctx.fill();



      ctx.beginPath()

      ctx.arc(150, 99, 20, 1 * Math.PI, 2 * Math.PI, false)

      ctx.fill();



      ctx.beginPath()

      ctx.arc(150, 99, 10, 1 * Math.PI, 2 * Math.PI, false)

      ctx.fill();



      ctx.beginPath()

      ctx.arc(150, 99, 5, 1 * Math.PI, 2 * Math.PI, false)

      ctx.fill();



      ctx.globalAlpha = 1;

      ctx.beginPath();

      // 颜色修改

      ctx.fillStyle = '#1d953f';

      // 前两位置  后两宽高  fillRect 设置矩形

      ctx.fillRect(200, 200, 100, 100);

      // clearRECT 清除某些区域颜色

      ctx.clearRect(15, 15, 20, 20);

      ctx.strokeRect(20, 20, 10, 10)



      ctx.beginPath()

      // 起始点

      ctx.moveTo(201, 199);

      // 第二点位置

      ctx.lineTo(300, 199);

      // 第三点

      ctx.lineTo(300, 100);

      // 绘制

      ctx.fill()



      ctx.beginPath()

      ctx.moveTo(200, 301);

      ctx.lineTo(200, 400);

      ctx.lineTo(300, 301);

      ctx.fill()



      ctx.beginPath()

      ctx.strokeStyle = '#6950a1';

      ctx.moveTo(100, 200);

      ctx.lineTo(200, 300);

      ctx.stroke();






    }

  }

</script>



</html>

Thekingyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 简单的dome 简单的图表

<html><head> <title>Canvas tutorial</title> <style type="text/css"> #tutorialval { /* transform: scaleX(180deg); */ transform: rotateX(180deg); } </style></head><body o...
复制链接

扫一扫