Demo – canvas drawing board

Mainly practice related apis

  1. On the phone, touch events
  2. Click events on the computer
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>canvas</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas ID ="canvas" Width ='100' height='100'></canvas> <script> // Canvas let canvas = document.getelementById ("canvas"); canvas.width=document.documentElement.clientWidth; canvas.height=document.documentElement.clientHeight; let ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.lineWidth=8 ctx.lineCap='round' function drawLine(x1,y1,x2,y2){ ctx.beginPath() ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); } let painting=false; Var isTouchDevice = 'onTouchStart' in document.documentElement; if(isTouchDevice){ canvas.ontouchstart = (e)=>{ console.log(1) let x = e.touches[0].clientX let y = e.touches[0].clientY  last = [x, y] } canvas.ontouchmove =(e)=>{ console.log(e) let x = e.touches[0].clientX let y = e.touches[0].clientY // . / / the console log (x, y) / / CTX beginPath () / / CTX arc (x, y, 10,0,2 * math.h PI) / / CTX. The stroke () / / CTX. The fill () DrawLine (last[0],last[1],x,y) last=[x,y]}} else{// Canvas. Onmousedown =(e)=>{painting=true; last = [e.clientX,e.clientY] } canvas.onmousemove=(e)=>{ if(painting === true){ // ctx.fillRect (e.clientX -5, e.clientY-5, 10, 10); ) / / / / CTX. BeginPath (CTX) arc (x, y, 10,0,2 * math.h PI) / / CTX. The stroke () / / CTX. The fill () drawLine(last[0],last[1],e.clientX,e.clientY) last=[e.clientX,e.clientY] } else{ console.log('nothing') } } canvas.onmouseup=()=>{ painting=false; } } </script> </body> </html>Copy the code

Preview connection: wantingjun. Making. IO/canvas – demo…