<table class="html5">
<tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104 > > > >画图板> > > > *{margin: 0; padding: 0;} ul,ol{list-style: none;} th,strong,var,em{font-weight: normal; font-style: normal;} a{text-decoration: none;} body{ width: 100%; height: 100%; } .Box{ width: 800px; height: 940px; margin:0 auto; } #cvs{ background-color: #000; } #btn{ line-height: 30px; font-size: 25px; color: green; height: 30px; width: 120px; cursor: pointer; } span{ height: 30px; display: inline-block; text-align: center; font-size: 26px; line-height: 30px; color: #666; } #sb{ width: 170px; text-align: left; } #color{ height: 30px; /*margin-left: 20px;*/ } #range{ width: 100px; margin-left: 10px; } > > onselectstart> Box"> >您的浏览器不支持canvas!> >清空画板> >颜色：> > >线条粗细：1> > > ><> > var cvs=document.getElementById('cvs'); var btn=document.getElementById('btn'); var setColor=document.getElementById('color'); var range=document.getElementById('range'); var sb=document.getElementById('sb'); var ctx=cvs.getContext('2d'); var x=0,y=0,color='',lineW=1; cvs.onmousedown=function(e){ // console.log(1); var e=e||window.event; color=setColor.value; console.log(setColor); ctx.beginPath(); x=e.clientX-cvs.offsetLeft; y=e.clientY-cvs.offsetTop; ctx.moveTo(x,y); document.onmousemove=function(e){ var e=e||window.event; x=e.clientX-cvs.offsetLeft; y=e.clientY-cvs.offsetTop; ctx.strokeStyle=color; ctx.lineWidth=lineW; ctx.lineTo(x,y); ctx.stroke(); } document.onmouseup=function(){ document.onmousemove=null; } } btn.onclick=function(){ ctx.clearRect(0,cvs.width,cvs.height); } range.onchange=function(){ lineW=range.value; sb.innerHTML='线条粗细：'+range.value; } > > >
