canvas 画板

aokuang7460

于 2019-09-10 21:34:00 发布

阅读量124

点赞数

文章标签：嵌入式

原文链接：http://www.cnblogs.com/ATnTention/p/11503101.html

版权

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

转载于:https://www.cnblogs.com/ATnTention/p/11503101.html

aokuang7460

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 画板

这周学习了canvascanvas是一个嵌入式元素类似嵌入了一个画布这次得画板就是通过鼠标可以在画布上进行画图并且可以改变它的线条得粗细颜色清除画板三个小功能注意点获取鼠标当前得位置当鼠标点击得时候我们需要得到鼠标的位置并且在画板相应的位置留下笔记 event.clientX 得到的时鼠标位与页面的位置...
复制链接

扫一扫