这周学习了canvas
canvas是一个嵌入式元素 类似 嵌入了一个画布
这次得画板 就是通过鼠标可以在画布上进行 画图
并且可以改变它的线条得粗细 颜色
清除画板 三个小功能
注意点
获取鼠标当前得位置
当鼠标点击得时候 我们需要得到 鼠标的位置 并且在画板相应的
位置留下笔记 event.clientX 得到的时鼠标位与页面的位置
offsetLeft 得到的时canvas元素位于 页面的 位置
两者相减 就得到了 鼠标在canvas元素中的位置
鼠标抬起 得时候需要清除 事件效果
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>