Canvas简述---绘图篇（2/3）

我们这个简述，弄在一起感觉太长了，我就拆开用三部分去聊，主要是有代码，看起来比较长，不是很爽，不介意把，哈哈哈

1、绘制矩形

var canvas = document.getElementById('canvasElem');
      canvas.style.border = '1px solid red'
      var ctx = canvas.getContext('2d')
      // 绘制矩形用到rect rect(x,y,w,h)  分别表示起始横纵坐标 宽度 长度
      // ctx.beginPath()  //注意：重新beginPath需要诚信stroke
      // 画矩形
      ctx.rect(50,50,100,100)
      ctx.strokeStyle = 'purple'
      ctx.fillStyle = 'red'
      ctx.fill()
      ctx.stroke()
      
      // 描边矩形
      ctx.strokeRect(200,200,50,50)
      // 注意：rect和strokeRect有什么不同？
      // rect是单纯的创建一个矩形，但是不具有绘画的能力，需要stroke()进行描边，strokeRect不但具有绘画，而且具有描边的能力

      // 填充矩形
      ctx.fillRect(300,300,100,50)

ctx.rect(x, y, w, h)：这个绘制的是一个形状，需要去描边
ctx.strokeRect(x, y, w, h):这个绘制时一个自己描边了的矩形
ctx.fillRect:这里绘制的是填充的矩形，默认颜色的黑色

2、绘制饼状图

var canvas = document.getElementById('canvasElem');
      canvas.style.border = '1px solid red'
      var ctx = canvas.getContext('2d')
      // arc(x,y,r,sAngle,eAngle,countclockwise)  
      //分别表示 圆心横纵坐标 半径 起始弧度 结束弧度 顺逆时针绘制
      // 绘制从0-30度的弧
      ctx.moveTo(300,300)
      ctx.arc(300, 300, 100, 0*Math.PI/180, 90*Math.PI/180, true)  
      //false是顺时针 true或不填为逆时针
      ctx.strokeStyle = 'green'
      ctx.closePath()
      ctx.fillStyle = 'red'
      ctx.fill()
      ctx.stroke()

注意：ctx.moveTo移动到的是圆心的位置，如果不加，可以自己试一下，绘制的是一个另外的形状，当然可以每次绘制一次的时候都要求回到圆心，这样可以把一个圆绘制各种颜色，试试看！

3、把图片绘制到canvas

看到这个应该喜欢了把，canvas绘制图片效率是很快的

var canvas = document.getElementById('canvasElem');
      canvas.style.border = '1px solid red'
      var ctx = canvas.getContext('2d')

      // 第一步：创建图片的dom对象
      var img = new Image()
      img.src = './1.jpg'
      img.onload = function() {  //这里是等待图片加载后执行
        // 如果给定的宽是订制，根据图片的默认高度求出拉伸后的高度（为了不变型）
        var ow = img.width   //图片默认的宽度
        var oh = img.height   //图片默认的高度
        ctx.drawImage(img, 100, 100, 500, 500 * oh / ow)   
        //(img, x, y, w, h)

      // 如果需要截取我们的图片的某个区域
      // (img, jx, jy, jw, jh, x, y, w, h)
      }

4、绘制坐标系

var canvas = document.getElementById('canvasElem');
      canvas.style.border = '1px solid red'
      var ctx = canvas.getContext('2d')

      var x0 = 100   //原点横坐标
      var y0 = 400  //原点纵坐标
      var maxHeight = 300  //最大高度
      var arrowWidth = 10 //箭头在x轴的投影
      ctx.beginPath()
      ctx.strokeStyle = 'blue'
      ctx.moveTo(x0,y0) 
      ctx.lineTo(500,y0)
      // 向上画箭头
      ctx.lineTo(500 - arrowWidth, y0 - arrowWidth)
      // 回到箭头的起点画向下箭头
      ctx.moveTo(500, y0)
      ctx.lineTo(500 - arrowWidth, y0 + arrowWidth)

      // 绘制y轴
      ctx.beginPath()
      ctx.moveTo(x0, y0)
      ctx.lineTo(x0, y0 - 300)
      ctx.lineTo(x0 - arrowWidth, y0 - 300 + arrowWidth)
      ctx.moveTo(x0, y0 - 300)
      ctx.lineTo(x0 + arrowWidth, y0 - 300 + arrowWidth)
      ctx.stroke() 

我们用到的ECharts也是根据canvas绘制的，我们也可以做到哟！

var data = [0.5, 0.3, 0.8, 0.4]
      var pointWidth = 400 / (data.length + 1)
      ctx.strokeStyle = 'red'
      ctx.beginPath() 
      ctx.moveTo(x0 + pointWidth,y0 - (data[0] * maxHeight) )
      data.forEach((elem, i) => {
        var x = x0 + (i + 1) * pointWidth
        var y = y0 - (data[i] * maxHeight)
        ctx.lineTo(x, y)
      })
      ctx.stroke()

把需要的点绘制到上面就可以得到一个折现图，上面圆就是那个饼状图，完美plus

5、文字的绘制

var canvas = document.getElementById('canvasElem');
      canvas.style.border = '1px solid red'
      var ctx = canvas.getContext('2d')
      // 绘制横线
      ctx.moveTo(0,301)
      ctx.lineTo(900,301)
      ctx.strokeStyle = 'teal'
      ctx.stroke()

      // 绘制竖线
      ctx.moveTo(450,0)
      ctx.lineTo(450,600)
      ctx.stroke()

      // 绘制坐标中心
      ctx.fillRect(445,295,10,10)

      // 绘制字体
      ctx.font = '20px "微软雅黑"'
      ctx.fillStyle = 'blue'
      ctx.textBaseline = 'top'        //顶线
      ctx.fillText('Top-g', 100, 300)

      ctx.textBaseline = 'middle'     //中线
      ctx.fillText('Middle-g', 490 , 300)

      ctx.textBaseline = 'alphabetic'  //基线
      ctx.fillText('alphabetic-g', 700, 300)

      ctx.fillStyle = 'grey'
      ctx.textAlign = 'left'   //线在左侧
      ctx.strokeText('left', 450, 400)

      ctx.textAlign = 'right'   //线在右侧
      ctx.strokeText('right', 450, 440)

      ctx.textAlign = 'start'   //线在左侧
      ctx.strokeText('start', 450, 480)

      ctx.textAlign = 'end'    //线在右侧
      ctx.strokeText('end', 450, 520)
 
      ctx.textAlign = 'center'   //线在中部
      ctx.strokeText('center', 450, 560)

大家可以自己多去用，这玩意不用就永远不用，用到了就会爱上它