canvas

canvas

画简单柱状图

<canvas id='box' width="500px" height="500px"></canvas>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  #box {
    margin: 30px auto;
    display: block;
  }
</style>
<script>

  var box = document.querySelector('#box')
  console.log(box.width)


  function moveleft() {
    var ctx = box.getContext('2d')
    // 格子画板
    ctx.beginPath()
    var m = 10
    for (let i = 0; i < (500 / m); i++) {
      ctx.moveTo(0, i * m)
      ctx.lineTo(500, i * m)
      ctx.moveTo(i * m, 0)
      ctx.lineTo(i * m, 500)
    }
    ctx.stroke()


    // 坐标轴画板

    ctx.beginPath()
    ctx.lineWidth = 3
    ctx.moveTo(50, 50)
    ctx.lineTo(50, 450)
    ctx.lineTo(450, 450)
    ctx.lineTo(440, 445)
    ctx.moveTo(450, 450)
    ctx.lineTo(440, 455)
    ctx.stroke()


    // 心跳点画板
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.strokeStyle = 'red'
    for (let i = 0; i < arr.length; i++) {
      ctx.lineTo(28 * i + 100 + absx, 500 - 50 - arr[i]*2)

    }
    ctx.stroke()
  }



  var arr = [100, 120, 80, 110, 90, 119, 70, 130, 90, 126, 92, 112, 89] //数据
  // 动态生成数据

  setInterval(() => {
    arr.push(parseInt(Math.random() * (130 - 80) + 80))
  }, 1000);
  // 1000画布重绘向左移动25
  var x = 28
  var absx = 0
  setInterval(() => {
    box.width = 500
    moveleft()
    absx = absx-x/(1000/250)
    console.log(absx)
  }, 250);
</script>

画心跳图

<style>
  #box {
    margin: 30px auto;
    display: block;
    border: 1px solid pink;
  }
</style>
<canvas id="box" width="500px" height="500px"></canvas>
<script>
  var box = document.querySelector('#box')
  var ctx = box.getContext('2d')
  // 数据 
  var arr = [399,490,209,969,110,489]
  ctx.beginPath()
  ctx.moveTo(50,50)
  ctx.lineTo(50,480)
  ctx.moveTo(20,450)
  ctx.lineTo(480,450)
  ctx.stroke()
  ctx.beginPath()
  ctx.fillStyle = 'pink'
  let bl = 380/Math.max(...arr)
  for(let i = 0; i < arr.length; i++) {
    ctx.fillRect(70+i*70,450-arr[i]*bl,50,arr[i]*bl)
  }

  ctx.stroke()
</script>

效果

时钟表

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #box {
    display: block;
    margin: 100px auto;
    border: 1px solid pink;
  }
</style>
<canvas id="box" width="600px" height="600px"></canvas>
<script>
  var box = document.querySelector('#box')
  var ctx = box.getContext('2d')
  var deg = Math.PI / 180

  function shizhong() {
    let kedu = 10
    r = 200
    ctx.arc(300, 300, r, 0, 360 * deg)
    for (let i = 0; i < 60; i++) {
      // 度数 6*i
      let a = kedu
      if (i % 5) { a = kedu }
      else {
        a = kedu * 2
      }
      let x1 = 300 + (r - a) * Math.cos(i * 6 * deg)
      let y1 = 300 + (r - a) * Math.sin(i * 6 * deg)
      let x2 = 300 + r * Math.cos(i * 6 * deg)
      let y2 = 300 + r * Math.sin(i * 6 * deg)
      ctx.moveTo(x1, y1)
      ctx.lineTo(x2, y2)
    }

    // 秒数
    let sj = new Date()
    let ms = sj.getSeconds()
    let x3 = 300 + (r - 60) * Math.cos((ms-15) * 6 * deg)
    let y3 = 300 + (r - 60) * Math.sin((ms-15) * 6 * deg)
    ctx.moveTo(300, 300)
    ctx.lineTo(x3, y3)


    // 分钟
    let fz = sj.getMinutes()
    // console.log(fz * 6 * deg)
    // 60/6 = ms/fz  fz * 60 = 6 *ms  度数 = (6*ms/60)
    let x4 = 300 + (r - 80) * Math.cos((((-15+fz) * 6) + (6*ms/60)) * deg)
    let y4 = 300 + (r - 80) * Math.sin((((-15+fz) * 6) + (6*ms/60)) * deg)
    ctx.moveTo(300, 300)
    ctx.lineTo(x4, y4)
    // 30度 60分钟   60/30 = fz/度数    度数 = (30*fz/60)
    // 小时 (house-3)*(360/12) + (30*fz/60)
    let house = sj.getHours()
    let x5 = 300 + (r - 100) * Math.cos(((house-3)*(360/12) + (30*fz/60)) * deg)
    let y5 = 300 + (r - 100) * Math.sin(((house-3)*(360/12) + (30*fz/60)) * deg)
    ctx.moveTo(300, 300)
    ctx.lineTo(x5, y5)
    ctx.stroke()

  }
  shizhong()
  setInterval(() => {
    box.width = 600
    shizhong()
  }, 1000);
</script>

效果图

画星星评分控件

需求：用canvas写一个评分的星星控件

思路

1. 准备写一个封装一个函数huaxingxing()来画星星图

2. 添加事件，当鼠标移到星星上面时候，变颜色，点击则完成打分

代码

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    margin: 30px auto;
    width: 800px;
  }

  .box_ctx {
    border: 1px solid pink;
  }
  .rank {
    width: 500px;
    height: 50px;
  }
</style>
<!-- 目标，封装画星星的函数 -->
<div class="box">
  <h1>评分</h1>
  <div class="rank"></div>
</div>

<script>

  var rank = document.querySelector('.rank')

  Object.prototype.huaxingxing = function (n=0, color = "pink", activecolor = "yellow") {
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')
    this.appendChild(canvas)
    var r = this.offsetHeight
    canvas.width = (r + 5) * 5
    canvas.height = r
    this.onmousemove = function(e) {
      var n=Math.ceil((e.pageX-this.offsetLeft)/(this.offsetHeight + 5))
      console.log(n)
      this.innerHTML=""
      this.huaxingxing(n)
    }
    // let n = 3
    for (let i = 0; i < 5; i++) {
      if (i < n) {
        ctx.xingxing(r/2+r*i,r/2,r/2, activecolor)
      } else {
        ctx.xingxing(r/2+r*i,r/2,r/2, color)
      }

    }
    // ctx.stroke()


  }

  Object.prototype.xingxing = function (x, y, r, color) {
    this.beginPath()
    let jdangle = -17
    let arrsize = []
    let deg = Math.PI / 180

    for (let i = 0; i < 5; i++) {
      let point = {
        x: x + r * Math.cos((72 * i + jdangle) * deg),
        y: y + r * Math.sin((72 * i + jdangle) * deg)
      }
      arrsize.push(point)
    }
    this.moveTo(arrsize[0].x, arrsize[0].y)
    this.lineTo(arrsize[2].x, arrsize[2].y)
    this.lineTo(arrsize[4].x, arrsize[4].y)
    this.lineTo(arrsize[1].x, arrsize[1].y)
    this.lineTo(arrsize[3].x, arrsize[3].y)
    this.lineTo(arrsize[0].x, arrsize[0].y)
    this.fillStyle = color
    this.fill()
  }
 
  rank.huaxingxing()
</script>

饼状图

<style>
  .box {
    margin: 0 auto;
    display: block;
    border: 1px solid pink;
  }
</style>
<canvas class="box" width="600px" height="600"></canvas>
<script>
  var ctx = document.querySelector('.box').getContext('2d')
  // 数据
  var data = [{
    id: 111,
    count: 2039

  },{
    id: 112,
    count: 2049
  },{
    id: 113,
    count: 2339
  }]
  var total = 0
  for(let i = 0; i < data.length; i++) {
    total += data[i].count
  }
  var angle = 0
  var deg = Math.PI/180
  data.forEach((el)=>{
    ctx.beginPath()
    let r =  parseInt(Math.random()*255)
    let g =  parseInt(Math.random()*255)
    let b =  parseInt(Math.random()*255)
    ctx.fillStyle = `rgb(${r},${g},${b})`
    let bili = (360*el.count)/total
    console.log(bili)
    ctx.lineTo(300,300)
    ctx.arc(300,300,100,angle*deg,(bili+angle)*deg)
    ctx.fill()
    ctx.stroke()
    angle += bili
  })
</script>

效果图