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、多边形填充加描边

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