关于前端: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 第一节，之后会继续更新，大家感觉还实用的话，关注或者点个赞都能够，谢谢啦