I just started to learn Js

After reading the Canvas Api, the link is: Canvas Api is also learned through CRM

Initialize the project

  • Create a newindex.html
  • Initialize thegitthengit init
  • Preview: Install the tool firstyarn global add http-serveAfter loadinghs . -c-1You can preview it

Heght: 100Vh As high as the screen

Make one at random and change if it’s wrong

Skills:

How can I be sure I want x and y? You can pick a special location, the top left corner, x,y

code:


canvas.onclick = (e) = >{
    console.log(e) 
    // console.log mode
}

Copy the code

canvas.onclick = (e) = >{
    console.log(e.clientX)
    console.log(e.clientY)
}

Copy the code
  1. document.createElementLet the document create a label
  2. div.style.left = e.clientX + 'px'Notice the units
  3. canvas.appendChild(div)Add a child div
  4. onmousemoveMouse movement event
  5. fillStyleFill the style
  6. fillRectFill the rectangle
  7. paintingIs drawing
  8. strokeStylestroke

Log the location of the mouse, create a div + CSS style, and add the style to the Canvas style

Div tags can be awkward, so choose Canvas

As for how to draw lines with canvas!

The default canvas element is inline, so setting the width and height is useless

#canvas{
    display:block;
}
Copy the code

The width and height of the image will be overwritten by CSS style, and the width and height can be written on canvas

<canvas id ="canvas width='100' height='100'></canvas>


ctx.fillStyle = 'blue' // Control its color
ctx.fillRect('the initial x-coordinate'.Y-coordinate.` width `.` highly `);

Copy the code

The width and height of canvas are determined at the beginning. It must be written well at the beginning that its width is the width of the screen and its height is the height of the screen

With what?!

With the log

console.log(document.body.clienWidth)
Copy the code

canvas.width = documentElement.clientWidth

canvas.height = documentElement.clientHeight

Get the canvas, the width becomes the width of the document, and the height becomes the height of the document

ctx.beginPath(); / / start
ctx.arc(` circle `.` radius `.` Angle `.2*Math.PI); / / and then draw
ctx.stroke(); / / end
Copy the code

About Document Links

The mobile terminal

canvas.onmusemove
Copy the code

Because it is monitoring the mouse event, the phone does not have a mouse

As things stand, it’s hard to find a reliable way to check whether the mouse is supported or not

  • There are two other methods:
    1. Depending on the screen width
    2. Js checks whether touch screen is supported

Use the second method

var isTocuhDevice = 'ontouchstart` in document.documentElement;
console.log('isTouchDevice')
Copy the code

It supports touch screen, and then switch to PC, also supported


if(isTouchDevice){
    // What do you do on a touchscreen device
}else{
    // What if it's not a touch device
    canvas.onmusedown =() = >{
        painting = true
    }
    canvas.onmusemove = (x) = >{
        if(painting === true){
            ctx.beginPath(); / / start
            ctx.arc(` circle `.` radius `.` Angle `.2*Math.PI); / / and then draw
            ctx.stroke(); / / end
        }
    }
    canvas.onmuseup = () = > {
        painting = false}}Copy the code
if(isTouchDevice){
    canvas.ontouchmove = (e) = >{ // Get an event
        console.log(e.tochs[0])}}Copy the code

I’m sorry we don’t have x and y

So if you have multiple events there are two touches here, and each tocuh will tell you, that’s a different structure for different events

if(isTouchDevice){
    canvas.ontouchmove = (e) = >{ // Get an event
      let x = e.tochs[0].clientX
      let y = e.tochs[0].clientY
      // This knowledge is not available in the document and must be obtained using the log method
      console.log(x.y)
      ctx.beginPath(); / / start
      ctx.arc(` circle `.` radius `.` Angle `.2*Math.PI); / / and then draw
      ctx.stroke(); / / end}}Copy the code

I’ll tell you it’s a lot more complicated on your phone

There is a bug in accessing wechat browser on wechat. There is no problem in normal browser. If there is special operation, the screen will move with you when the browser slides down

  1. touchtouch
  2. ontouchstartYou just start getting touched
  3. touchMultiple finger events

Add common sense: have nothing to do with JS

When you swipe on your phone, it must be one finger, or two fingers, so E includes multiple finger events