用JS和html做一个简易画板代码


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

今天教大家做一个小程序,利用CSS3和H5以及JS做一个好玩的简易画板,有兴趣的朋友可以动手尝试一下,代码贴在下面。大家也可以发挥自己的创造力改动一些功能。

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

html:

<body>

<canvas width="800" height="600" id="c1">

<span>

</span>

</canvas>

<ul id="ul1">

<li>颜色版:<input id="color" type="color"/></li>

<li>笔触:<input id="num" type="number" min="0" max="100"/></li>

<li></li>

</ul>

</body>

css:

<style>

*{ margin:0; padding:0;}

body{ background:#000;}

canvas{ background:#fff; float:left;}

span{ color:#fff; font-size:80px;}

#ul1{width:100px;height:600px; float:left; background:#ccc;}

</style>

javascript:

  

<script>

window.onload=function(){

var oC=document.getElementById('c1');

var oColor=document.getElementById('color');

var oNum=document.getElementById('num');

var gd=oC.getContext('2d');//画笔

oNum.onchange=function(){

gd.lineWidth = oNum.value;

strokeFn();

};

oColor.onchange=function(){

gd.strokeStyle = oColor.value;

strokeFn();

};

strokeFn();

function strokeFn(){

gd.beginPath();

oC.onmousedown=function(ev){

gd.moveTo(ev.clientX,ev.clientY);

oC.onmousemove=function(ev){

gd.lineTo(ev.clientX,ev.clientY);

gd.stroke();

};

oC.onmouseup=function(){

oC.onmousemove=oC.onmouseup=null;

};

return false;

};

}

};

</script>


阅读剩余部分

相关阅读 >>

javascript怎么设置全选

html5/css3增加了哪些伪类

javascript如何删除array数组元素

通过javascript函数生成字符串的所有排列组合

javascript中的数据类型和类型转换

html中的空格符号有哪些

html如何设置边框为虚线

荟萃javascript箭头函数语法小结

html页面的基本代码结构是什么?

html的标题总结推荐

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...