canvas基础1 - 画直线（通俗易懂）

系列文章目录

本文开始是canvas，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理
视频课指路：慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础

1、声明标签

1. 宽高在标签上

   <canvas 
    id="canvas" 
    width="1024" 
    height="768"
    style="background-color: rgb(200,200,200);display: block;margin: 20px auto;"
   >
    当前浏览器不支持canvas，请更换浏览器后再试
   </canvas>

2. 宽高在js中设置

   <canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
    当前浏览器不支持canvas，请更换浏览器后再试
   </canvas>

   window.onload = function () {
    // 获取
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    // 判断该浏览器是否可以使用canvas
    if (canvas.getContext('2d')) {
      // 使用2d绘图
      var context = canvas.getContext('2d')
      // 使用context绘制
    } else {
      alert('当前浏览器不支持canvas，请更换浏览器后再试')
    }
   }

2、画一条直线

1. canvas先设置状态最后绘制
   

2. 画一条直线js代码

   context.moveTo(x, y) 起点
   context.lineTo(x, y) 终点
   context.lineWidth = 5 线宽
   context.strokeStyle = '#005588' 线样式
   context.stroke() 绘制

   window.onload = function () {
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    if (canvas.getContext('2d')) {
      var context = canvas.getContext('2d')
      // 使用context绘制
      // 从坐标(100,100)为起点开始
      context.moveTo(100, 100)
      // 到坐标(700,700)为终点画一条直线
      context.lineTo(700, 700)
      // 线宽为5
      context.lineWidth = 5
      // 线的样式颜色
      context.strokeStyle = '#005588'
      // 执行划直线这个操作
      context.stroke()
    } else {
      alert('当前浏览器不支持canvas，请更换浏览器后再试')
    }
   }

   效果
   

   3、线条组成的图形 - 画一个三角形

   window.onload = function () {
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    if (canvas.getContext('2d')) {
      var context = canvas.getContext('2d')
      // 使用context绘制
      // 从坐标(100,100)为起点开始
      context.moveTo(100, 100)
      context.lineTo(700, 700)
      context.lineTo(100, 700)
      context.lineTo(100, 100)
      // 线宽为5
      context.lineWidth = 5
      // 线的样式颜色
      context.strokeStyle = '#005588'
      // 执行划直线这个操作
      context.stroke()
    } else {
      alert('当前浏览器不支持canvas，请更换浏览器后再试')
    }
   }

   

   4、多边形填充加描边

• context.fillStyle = 'rgb(2,100,30)' 填充的颜色

• context.fill() 填充

  window.onload = function () {
   var canvas = document.getElementById('canvas')
   canvas.width = 1024
   canvas.height = 768
   if (canvas.getContext('2d')) {
     var context = canvas.getContext('2d')
     // 使用context绘制
     // 从坐标(100,100)为起点开始
     context.moveTo(100, 100)
     // 到坐标(700,700)为终点画一条直线
     context.lineTo(700, 700)
     context.lineTo(100, 700)
     context.lineTo(100, 100)
     // 线宽为5
     context.lineWidth = 5
     // 线的样式颜色
     context.strokeStyle = '#f00'
     // 执行划直线这个操作
     context.stroke()
   
     // 多边形填充
     context.fillStyle = 'rgb(2,100,30)'
     context.fill()
   } else {
     alert('当前浏览器不支持canvas，请更换浏览器后再试')
   }
  }

  

  5、定义两个形状

• context.beginPath() 起始
• context.closePath() 结束

• 这两个方法将两段路径包裹起来将其与其它路径分隔开

  window.onload = function () {
  var canvas = document.getElementById('canvas')
   canvas.width = 1024
   canvas.height = 768
   if (canvas.getContext('2d')) {
     var context = canvas.getContext('2d')
     // 使用context绘制
     // 从坐标(100,100)为起点开始
     context.beginPath()
     context.moveTo(100, 100)
     // 到坐标(700,700)为终点画一条直线
     context.lineTo(700, 700)
     context.lineTo(100, 700)
     context.lineTo(100, 100)
     context.closePath()
     // 线宽为5
     context.lineWidth = 5
     // 线的样式颜色
     context.strokeStyle = '#f00'
     // 执行划直线这个操作
     context.stroke()
   
     // // 多边形填充
     // context.fillStyle = 'rgb(2,100,30)'
     // context.fill()
     context.beginPath()
     context.moveTo(200, 100)
     context.lineTo(700, 600)
     context.closePath()
     context.strokeStyle = '#000'
     context.stroke()
   
   } else {
     alert('当前浏览器不支持canvas，请更换浏览器后再试')
   }
  }

  

  6、七巧板demo例子

• html部分

  <canvas id="canvas" width="800" height="800" style="background-color: aliceblue;display: block;margin: 10px auto;">
   当前浏览器不支持canvas，请更换浏览器后再试
  </canvas>

• 自造数据部分

  var tangram = [
   {
       p: [{x: 0,y: 0},{x: 800,y: 0},{x: 400,y: 400},],
       color: '#caff67'
   }, {
       p: [{x: 0,y: 0},{x: 400,y: 400},{x: 0,y: 800},],
       color: '#67becf'
   }, {
       p: [{x: 0,y: 800},{x: 400,y: 400},{x: 400,y: 800},],
      color: '#f50'
   }, {
       p: [{x: 400,y: 800}, {x: 800,y: 800}, {x: 400,y: 400}, ],
       color: '#0f5'
   }, {
       p: [{x: 400,y: 400}, {x: 800,y: 0}, {x: 600,y: 600}, ],
       color: '#25f'
   }, {
       p: [{x: 800,y: 0}, {x: 600,y: 600}, {x: 800,y: 800}, ],
       color: '#f33'
   }, 
  ]

• js部分

  let canvas = document.getElementById('canvas')
   if (canvas.getContext('2d')) {
     var context = canvas.getContext('2d')
     tangram.forEach((item, index) => {
       draw(item, context)
     })
   }
   
   function draw(piece, cxt) {
     cxt.beginPath()
     cxt.moveTo(piece.p[0].x, piece.p[0].y)
     piece.p.forEach((item, index) => {
       cxt.lineTo(item.x, item.y)
     })
     cxt.closePath()
   
     cxt.fillStyle = piece.color
     cxt.fill()
     cxt.lineWidth = 2
     cxt.strokeStyle = '#000'
     cxt.stroke()
  }

  7、绘制正方形demo

  <canvas id="canvas" width="1024" height="768" style="display: block;
  background-color: #eee;margin: 10px auto;">
   不能使用
  canvas
  </canvas>
  <script>
   var canvas = document.getElementById('canvas')
   var context = canvas.getContext('2d')
   drawRect(context, 100, 100, 400, 400, 10, '#600', '#008833')
   
   function drawRect(cxt, x, y, width, height, borderWidth, borderColor, borderFill) {
     cxt.beginPath()
     cxt.moveTo(x, y)
     cxt.lineTo(x + width, y)
     cxt.lineTo(x + width, y + height)
     cxt.lineTo(x + width, y + height)
     cxt.lineTo(x, y + height)
     cxt.closePath()
   
     cxt.lineWidth = borderWidth
     cxt.strokeStyle = borderColor
     cxt.fillStyle = borderFill
   
     cxt.fill()
     cxt.stroke()
   }
  </script>

总结

本文问canvas第一节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦