系列文章目录

本文开始是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、多边形填充加描边

1. context.fillStyle = 'rgb(2,100,30)' 填充的颜色
2. 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、定义两个形状

1. context.beginPath() 起始
2. context.closePath() 结束
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.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例子

1. html部分

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

2. 自造数据部分

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'
    }, 
]

3. 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第一节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦