The canvas high width

Canvas Canvas size is determined by width and height (in HTML).

Canvas features are similar to IMG.

CSS increases its width or height → overall scaling → it is not recommended to use CSS to control the initial width and height of canvas.

Canvas location features

The phenomenon of

As shown above, when the mouse clicks on the top left corner of the green canvas (left: 0, top: 0), the circle appears in the position shown in the picture

why

In HTML, the body property has a 20px margin, so when the mouse clicks on the top left corner of the green canvas (left: 0, top: 0), the position is 20,20. But when canvas draws a circle, it does follow the elements of canvas itself, so it becomes canvas (20,20) and body (40,40).

Note when using JS for control

demand

Canvas eraser button → Click → Change to brush button → click again → Change to eraser

Error model

Don’t do it!

    var eraserEnabled = false;
    eraser.onclick = function(){ eraserEnabled = ! eraserEnabledif (eraserEnabled){
            eraser.textContext ='brush'
        }else{
            eraser.textContext ='Eraser'}}Copy the code

The reason for the error

It requires very fine control of the whole cycle

The solution

A button controls only one thing

Correct demonstration

HTML:
<div class="actions" id="actions">
  <button id="eraser"> </button> <button id="brush"</button> </div> CSS:.actions{position:fixed; top:0; left:0; } .actionsx{position:fixed; top:0; left:0; } .actions >#brush{display: none; }
.actionsx > #eraser{display: none; }
.actionsx > #brush{display: inline-block; }

js:
eraser.onclick = function(){ eraserEnabled = ! eraserEnabled actions.className ='actionsx'
}
brush.onclick = function(){ eraserEnabled = ! eraserEnabled actions.className ='actions'
}
Copy the code

Train of thought

Write two buttons → use CSS style (display:none) to control whether it appears → use js to control CSS className (.classname)

advantages

Straightforward, no need to carefully consider the judgment process, reduce the emergence of bugs

Canvas for mobile

meta:vp

Feature detection

    if(document.body.ontouchstart === null){
    }else(document.body.onmousedown === undefined){
    }
Copy the code

Change the event name and attribute name

  1. Use console.log() to print out the information contained in the function itself
    canvas.onmousedown = function(aaa){  
        console.log(aaa)
    }
Copy the code

Using icon is more aesthetically pleasing

rendering

Train of thought

Write the changed CSS style → Add a className to the style → add a new name to the classList with JS control when clicking

code

CSS:.actions > svg.active{transition:all 0.6s; width:4em; height:4em; fill:yellow; } js: eraser.onclick =function(){
    eraser.classList.add('active')
    pen.classList.remove('active')
}
pen.onclick = function(){
    pen.classList.add('active')
    eraser.classList.remove('active')}Copy the code

Disallow dragging the canvas as a whole

Use CSS for absolute positioning (js may interfere with each other)

position:fixed;
left:0;
top:0;
Copy the code

LAN debugging

Advantages: No need to use Github to debug the mobile terminal directly on the phone

steps

  1. Find the ipv4 address of wifi

Console.log () is used to check for bugs

Can result in any bug!! Any bugs!! Any!!!!!

  1. Guess what went wrong first
  2. Print all variables (at least 10)
  3. If there are still problems, keep adding variables and printing until you find an obvious error
  4. If you can’t see something like object, use it
JSON.stringify()
Copy the code