简易的canvas画图本

<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; ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? > > > ? ? ? ? > ? ? ? ? ? ? ? ? >您的浏览器不支持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; ? } > > >（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

<table class="html5">