Canvas foundation 1 - draw a straight line (easy to understand)

List of articles

This article begins with canvas, Easy to understand , Xiaobai has no trouble , According to MOOCS liuyubobobo The teacher's video lesson learning and sorting
Video lesson guide ： For class network liuyubobobo teacher Gorgeous countdown effect Canvas Fundamentals of drawing and animation

---

---

1、 Declaration label

1. Width and height are on the label

<canvas id="canvas" width="1024" height="768" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;" >
     The current browser does not support canvas, Please change your browser and try again 
</canvas>

2. Width and height in js Set in

<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">
     The current browser does not support canvas, Please change your browser and try again 
</canvas>

window.onload = function () {
    
    //  obtain 
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    //  Determine whether the browser can be used canvas
    if (canvas.getContext('2d')) {
    
      //  Use 2d mapping 
      var context = canvas.getContext('2d')
      //  Use context draw 
    } else {
    
      alert(' The current browser does not support canvas, Please change your browser and try again ')
    }
}

2、 Draw a straight line

1. canvas First set the state and then draw
   

2. Draw a straight line js Code

   context.moveTo(x, y) The starting point
   context.lineTo(x, y) End
   context.lineWidth = 5 Line width
   context.strokeStyle = ‘#005588’ Line style
   context.stroke() draw

window.onload = function () {
    
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    if (canvas.getContext('2d')) {
    
      var context = canvas.getContext('2d')
      //  Use context draw 
      //  From coordinates (100,100) Start from 
      context.moveTo(100, 100)
      //  To coordinates (700,700) Draw a straight line for the end 
      context.lineTo(700, 700)
      //  The line width is 5
      context.lineWidth = 5
      //  The style and color of the line 
      context.strokeStyle = '#005588'
      //  Execute the operation of drawing a straight line 
      context.stroke()
    } else {
    
      alert(' The current browser does not support canvas, Please change your browser and try again ')
    }
}

effect

3、 A figure composed of lines - Draw a triangle

window.onload = function () {
    
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    if (canvas.getContext('2d')) {
    
      var context = canvas.getContext('2d')
      //  Use context draw 
      //  From coordinates (100,100) Start from 
      context.moveTo(100, 100)
      context.lineTo(700, 700)
      context.lineTo(100, 700)
      context.lineTo(100, 100)
      //  The line width is 5
      context.lineWidth = 5
      //  The style and color of the line 
      context.strokeStyle = '#005588'
      //  Execute the operation of drawing a straight line 
      context.stroke()
    } else {
    
      alert(' The current browser does not support canvas, Please change your browser and try again ')
    }
}

4、 Polygon fill and stroke

1. context.fillStyle = ‘rgb(2,100,30)’ Fill color
2. context.fill() fill

window.onload = function () {
    
    var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    if (canvas.getContext('2d')) {
    
      var context = canvas.getContext('2d')
      //  Use context draw 
      //  From coordinates (100,100) Start from 
      context.moveTo(100, 100)
      //  To coordinates (700,700) Draw a straight line for the end 
      context.lineTo(700, 700)
      context.lineTo(100, 700)
      context.lineTo(100, 100)
      //  The line width is 5
      context.lineWidth = 5
      //  The style and color of the line 
      context.strokeStyle = '#f00'
      //  Execute the operation of drawing a straight line 
      context.stroke()
    
      //  Polygon fill 
      context.fillStyle = 'rgb(2,100,30)'
      context.fill()
    } else {
    
      alert(' The current browser does not support canvas, Please change your browser and try again ')
    }
}

5、 Define two shapes

1. context.beginPath() start
2. context.closePath() end
3. These two methods wrap the two paths and separate them from the other paths

window.onload = function () {
    
var canvas = document.getElementById('canvas')
    canvas.width = 1024
    canvas.height = 768
    if (canvas.getContext('2d')) {
    
      var context = canvas.getContext('2d')
      //  Use context draw 
      //  From coordinates (100,100) Start from 
      context.beginPath()
      context.moveTo(100, 100)
      //  To coordinates (700,700) Draw a straight line for the end 
      context.lineTo(700, 700)
      context.lineTo(100, 700)
      context.lineTo(100, 100)
      context.closePath()
      //  The line width is 5
      context.lineWidth = 5
      //  The style and color of the line 
      context.strokeStyle = '#f00'
      //  Execute the operation of drawing a straight line 
      context.stroke()
    
      // //  Polygon fill 
      // 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(' The current browser does not support canvas, Please change your browser and try again ')
    }
}

6、 Neves demo Example

1. html part

<canvas id="canvas" width="800" height="800" style="background-color: aliceblue;display: block;margin: 10px auto;">
     The current browser does not support canvas, Please change your browser and try again 
</canvas>

2. Self made data

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 part

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、 Draw a square demo

<canvas id="canvas" width="1024" height="768" style="display: block; background-color: #eee;margin: 10px auto;">
     Out of commission 
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>

---

summary

This article asks canvas Section 1 , After that, it will continue to update , If you feel it is still practical , It's OK to follow or like , Thank you very much!