This week we are learning the canvas
canvas is an embedded element embedded in a similar canvas
The drawing board is too can draw on the canvas by mouse
And you may have to change the line thickness Color
Clear drawing board three small functions
important point
You have to get the current mouse position
When the mouse click was when we need to get the mouse position and the corresponding drawing board
Position left position notes event.clientX get the mouse position and page
When the canvas element located at a position obtained offsetLeft page
It is obtained by subtracting the two positions in the mouse in the canvas element
Lift the mouse when you need to clear the event was the effect
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>画布 9 10 </title> 11 <style> 12 #myCan { 13 border: 1px solid; 14 } 15 16 .color { 17 display: inline-block; 18 width: 25px; 19 height: 25px; 20 margin: 0 5px; 21 } 22 </style> 23 </head> 24 25 <body> 26 <canvas id="myCan" width="500" height="500"></canvas> 27 <div> 28 <button onclick="clearCanvas()" style="float:left;">清除画布</button> 29 <div class="color" style="background-color: red;" onclick="changeColor('red')"></div> 30 <div class="color" style="background-color: blue;" onclick="changeColor('blue')"></div> 31 <div class="color" style="background-color: black;" onclick="changeColor('black')"></div> 32 <div class="color" style="background-color: green;" onclick="changeColor('green')"></div> 33 <div class="color" style="background-color: yellow;" onclick="changeColor('yellow')"></div> 34 <div class="color" style="background-color: white;" onclick="changeColor('white')"></div> 35 <input type="range" id="range" style="margin-left: 10px;" min="1" max="10" onchange="changeWidth(this.value)"> 36 </div> 37 <script> 38 let c = document.getElementById("myCan"); 39 // console.log(c); 40 41 var pen = c.getContext('2d'); 42 console.log(pen); 43 let color = document.getElementsByClassName("color"); 44 pen.lineWidth = 5; 45 46 c.onmousedown = function (e) { 47 var ev = e || window.event; 48 49 pen.beginPath(); 50 console.log("1"); 51 pen.moveTo(ev.clientX - c.offsetLeft, ev.clientY - c.offsetTop); 52 document.onmousemove = function () { 53 var ev = ev || window.event; 54 pen.lineTo(ev.clientX - c.offsetLeft, ev.clientY - c.offsetTop); 55 pen.stroke(); 56 // console.log("1"); 57 }; 58 }; 59 pen.closePath(); //end 绘画路径 60 61 c.onmouseup = function () { 62 document.onmousedown = null; 63 document.onmousemove = null; 64 } 65 66 let clearCanvas = function () { 67 // c.clearRect(0,0,c.width,c.height); 68 pen.clearRect(0, 0, 500, 500); 69 } 70 let changeColor = function (str) { 71 pen.strokeStyle = str; 72 for (let i = 0; i < color.length; i++) { 73 color[i].style.boxShadow = ""; 74 } 75 event.target.style.boxShadow = "0 0 8px black"; 76 } 77 78 function changeWidth(i) { 79 pen.lineWidth = i; 80 console.log(pen.lineWidth); 81 } 82 </script> 83 </body> 84 85 </html>