H5 新特性

图表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid #333;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script>
      let dataset = [
        {
          text: "家电用器",
          sales: 210,
        },
        {
          text: "音像制品",
          sales: 125,
        },
        {
          text: "手机通讯",
          sales: 98,
        },
        {
          text: "服装服饰",
          sales: 9,
        },
        {
          text: "家居家具",
          sales: 225,
        },
      ];
      //获取HTMLCanvasElement对象
      let canvasEle = document.getElementById("canvas");
      //获取CanvasRenderingContext2D对象
      let ctx = canvasEle.getContext("2d");
      //用于存储柱子的宽度
      let width = 50;
      //计算间隔的数量
      let spacerNum = dataset.length - 1;
      //计算间隔的距离
      let spacerWidth = Math.ceil(
        (canvasEle.width - dataset.length * width) / spacerNum
      );
      //设置填充颜色
      ctx.fillStyle = "#900";
      //设置文本样式
      ctx.font = "16px Microsoft Yahei";
      //设置文本水平对齐方式
      ctx.textAlign = "center";
      //通过循环结构来绘制柱形图
      dataset.forEach((item, index) => {
        //console.log(item.text + '--' + item.sales);
        //计算X轴与Y轴的位置
        let x = index * (spacerWidth + width);
        let y = canvasEle.height - item.sales;
        //绘制填充矩形
        ctx.fillRect(x, y, width, item.sales);
        //绘制文本
        ctx.fillText(item.sales, x + Math.floor(width / 2), y - 5);
      });
    </script>
  </body>
</html>

IP 定位

alt IP

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>根据ip定位</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style type="text/css">
      html,
      body,
      #container {
        height: 360px;
        width: 600px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div class="info">
      <p id="info"></p>
    </div>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=2cc7acd5402708b09bffcd61c0b47e2a&plugin=AMap.CitySearch"
    ></script>
    <script type="text/javascript">
      var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [114.085947, 22.547],
        zoom: 13,
      });
      //获取用户所在城市信息
      function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            if (result && result.city && result.bounds) {
              var cityinfo = result.city;
              var citybounds = result.bounds;
              document.getElementById("info").innerHTML =
                "您当前所在城市：" + cityinfo;
              //地图显示当前城市
              map.setBounds(citybounds);
            }
          } else {
            document.getElementById("info").innerHTML = result.info;
          }
        });
      }
      showCityInfo();
    </script>
  </body>
</html>

canvas 高级

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid #333;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script>
      let canvasEle = document.getElementById("canvas");
      canvasEle.width = 600;
      canvasEle.height = 360;
      let ctx = canvasEle.getContext("2d");
      //定时绘制
      let x = 0;
      let y = 0;
      let xDistance = 10;
      let yDistance = 10;
      let i = 0;
      window.setInterval(() => {
        i++;
        console.log(i);
        //擦除整个画布
        ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
        ctx.strokeRect(x, y, 100, 100);
        x += xDistance;
        y += yDistance;
        if (x > canvasEle.width - 100 || x <= 0) {
          xDistance = -xDistance;
        }
        if (y > canvasEle.height - 100 || y <= 0) {
          yDistance = -yDistance;
        }
      }, 100);
    </script>
  </body>
</html>

canvas 随机触碰边界换背景色

alt 03_basicAnimation.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid #333;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <p align="center">
      <button onclick="play()">开始</button>
      <button onclick="stop()">停止</button>
    </p>
    <script>
      let canvasEle = document.getElementById("canvas");
      canvasEle.width = 600;
      canvasEle.height = 360;
      let ctx = canvasEle.getContext("2d");
      let x = 0;
      let y = 0;
      let xDistance = 2;
      let yDistance = 1.5;
      let i = 0;
      //存储由window.requestAnimationFrame()方法返回的requestId
      let requestId;
      //声明变量用于假设当前动画的状态
      let isPlaying = true;
      //声明颜色的数组变量
      let colors = ["#f00", "#0f0", "#00f", "#000", "#ff0"];

      function animation() {
        //擦除整个画布
        ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
        ctx.fillRect(x, y, 100, 100);
        x += xDistance;
        y += yDistance;

        if (x > canvasEle.width - 100 || x <= 0) {
          xDistance = -xDistance;
          ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
        }
        if (y > canvasEle.height - 100 || y <= 0) {
          yDistance = -yDistance;
          ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
        }
        //调用requestAnimation()方法以完成动画的后续帧的绘制
        requestId = window.requestAnimationFrame(animation);
      }

      function stop() {
        if (isPlaying == true) {
          //停止动画
          window.cancelAnimationFrame(requestId);
          //设置动画的状态为停止
          isPlaying = false;
        }
      }
      function play() {
        if (isPlaying == false) {
          //动画播放
          animation();
          //设置动画的状态为播放
          isPlaying = true;
        }
      }
      animation(); //动画的一帧
    </script>
  </body>
</html>

canvas 三角形圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #canvas{
      display: block;
      margin: 0 auto;
      border:0.5px solid #333;
    }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
     let canvasEle = document.getElementById('canvas');
      canvasEle.width = 600;
      canvasEle.height = 360;
      let ctx = canvasEle.getContext('2d');
      //开始一个新的路径
      ctx.beginPath();
      //指定路径的起点
      ctx.moveTo(100,180);
      //绘制线段
      ctx.lineTo(300,180);
      ctx.lineTo(300,300);
      ctx.lineTo(100,180);
      ctx.stroke();
    //开始新的路径
    ctx.beginPath();
    //绘制圆弧
    ctx.arc(400, 180, 50, 0, 2 * Math.PI);
    //根据当前的描边样式来绘制图形
    ctx.stroke();
    </script>
    
</body>
</html>

alt banner_01

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body,
    p,
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    #canvas {
      display: block;
      background: #000;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    //获取HTMLCanvasElement元素
    let canvasEle = document.getElementById('canvas');
    //画布宽度与窗口宽度相同
    canvasEle.width = window.innerWidth;
    //画布高度为320像素
    canvasEle.height = 320;
    //获取CanvasRenderingContext2D对象
    let ctx = canvasEle.getContext('2d');
    //设置填充颜色
    ctx.fillStyle = '#fff';
    //声明存储50个球体的数组
    let circles = [];
    //声明球体类
    class Circle{
      constructor(){
          //X轴位置
          this.x = Math.floor(Math.random() * canvasEle.width);
          //Y轴位置
          this.y = Math.floor(Math.random() * canvasEle.height);
          //半径(3~8)
          this.radius =  Math.ceil(Math.random() * 5) + 3;
          //速度(如果随机数的2倍超过1,则为正数;否则为负数)
          this.xSpeed =  Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
          this.ySpeed =  Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
      }
    }
  

    //初始化 -- 绘制一帧
    function init() {        

      for(n =0;n<50;n++)  {
        //创建球体对象
        let circle = new Circle();
        //将球体对象添加到circles数组中
        circles.push(circle);
        //开始新的路径
        ctx.beginPath();
        //指定路径的起点
        ctx.moveTo(circle.x, circle.y);
        //通过arc()方法进行绘制路径
        ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
        //通过fill()方法完成绘制
        ctx.fill();
      }  
      console.log(circles);
    }

    //循环绘制动画帧
    function animation(){
      //清理画布
      ctx.clearRect(0,0,canvasEle.width,canvasEle.height);
      for(let n=0;n<50;n++){
        let circle=circles[n]
      circle.x += circle.xSpeed;
      circle.y += circle.ySpeed;
      //开始新的路径
      ctx.beginPath();
      //指定路径的起点
      ctx.moveTo(circle.x, circle.y);
      //绘制球体
      ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
      //通过fill()方法完成绘制
      ctx.fill();
      if(circle.x > canvasEle.width - circle.radius || circle.x <= 0){
        circle.xSpeed = - circle.xSpeed;
      }        
      if(circle.y > canvasEle.height - circle.radius || circle.y <= 0){
        circle.ySpeed = - circle.ySpeed;
      }   
     }
      window.requestAnimationFrame(animation);
    }
    //调用初始化函数
    init();
    //调用动画处理函数
    animation();
  </script>
</body>

</html>

canvas 随机触碰边界弹跳 banner2

alt banner_02

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body,
    p,
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      padding: 0;
    }

    ul,
    ol {
      list-style: none;
    }

    #canvas {
      display: block;
      background: #000;
    }
  </style>
</head>

<body>
  <div id=""></div>
  <canvas id="canvas"></canvas>
  <script>
    //获取HTMLCanvasElement元素
    let canvasEle = document.getElementById('canvas');
    
    //画布宽度与窗口宽度相同
    canvasEle.width = window.innerWidth;
    //画布高度为320像素
    canvasEle.height = 320;
    //获取CanvasRenderingContext2D对象
    let ctx = canvasEle.getContext('2d');
    //设置填充颜色
    ctx.fillStyle = '#fff';
    //声明存储50个球体的数组
    let circles = [];
    //声明球体类
    class Circle {
      constructor() {
        //X轴位置
        this.x = Math.floor(Math.random() * canvasEle.width);
        //Y轴位置
        this.y = Math.floor(Math.random() * canvasEle.height);
        //半径(3~8)
        this.radius = Math.ceil(Math.random() * 5) + 3;
        //速度(如果随机数的2倍超过1,则为正数;否则为负数)
        this.xSpeed = Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
        this.ySpeed = Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
      }
    }


    //初始化 -- 绘制一帧
    function init() {

      for (n = 0; n < 150; n++) {
        //创建球体对象
        let circle = new Circle();
        //将球体对象添加到circles数组中
        circles.push(circle);
        //开始新的路径
        ctx.beginPath();
        //指定路径的起点
        ctx.moveTo(circle.x, circle.y);
        //通过arc()方法进行绘制路径
        ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
        //通过fill()方法完成绘制
        ctx.fill();
      }
      console.log(circles);
    }

    //循环绘制动画帧
    function animation() {
      //清理画布
      ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
      for (let n = 0; n <150; n++) {
        //获取到每一个球体对象
        ctx.fillStyle=`rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`;
        let circle = circles[n];
        circle.x += circle.xSpeed;
        circle.y += circle.ySpeed;
        //开始新的路径
        ctx.beginPath();
        //指定路径的起点
        ctx.moveTo(circle.x, circle.y);
        //绘制球体
        ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
        //通过fill()方法完成绘制
        ctx.fill();
        if (circle.x > canvasEle.width - circle.radius || circle.x <= 0) {
          circle.xSpeed = - circle.xSpeed;
        }
        if (circle.y > canvasEle.height - circle.radius || circle.y <= 0) {
          circle.ySpeed = - circle.ySpeed;
        }
      }
      connect();
      window.requestAnimationFrame(animation);
    }

    function connect() {
      for (let n = 0; n < 150; n++) {
        for (let i = n + 1; i < 150; i++) {
            //勾股定理
            let distance = Math.sqrt((circles[n].x - circles[i].x)*(circles[n].x - circles[i].x) + (circles[n].y - circles[i].y) * (circles[n].y - circles[i].y));
            if(distance <= 50){
              ctx.strokeStyle = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`;
              ctx.beginPath();
              ctx.moveTo(circles[n].x,circles[n].y);
              ctx.lineTo(circles[i].x,circles[i].y);
              ctx.stroke();
            }
        }
      }
    }

    //调用初始化函数
    init();
    //调用动画处理函数
    animation();
  </script>
</body>
</html>

# H5 新特性

# 图表

# IP 定位

# canvas 高级

# canvas 随机触碰边界换背景色

# canvas 三角形 圆形

# canvas 随机触碰边界弹跳 banner

# canvas 随机触碰边界弹跳 banner2

H5 新特性

图表

IP 定位

canvas 高级

canvas 随机触碰边界换背景色

canvas 三角形圆形

canvas 随机触碰边界弹跳 banner

canvas 随机触碰边界弹跳 banner2