canvas 画板

这周学习了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>

猜你喜欢