ホームページ > ウェブフロントエンド > htmlチュートリアル > JS と HTML を使用して簡単なスケッチパッド コードを作成する

JS と HTML を使用して簡単なスケッチパッド コードを作成する

php中世界最好的语言
リリース: 2017-11-30 14:11:57
オリジナル
4034 人が閲覧しました

今日は、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(&#39;c1&#39;);

var oColor=document.getElementById(&#39;color&#39;);

var oNum=document.getElementById(&#39;num&#39;);

var gd=oC.getContext(&#39;2d&#39;);//画笔

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>

ログイン後にコピー


これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

CSS を使用せずにマウスオーバーのスタイルを変更する方法

CSS を使用して画像の回転効果を作成する方法

HTML Web ページを最適化する方法

以上がJS と HTML を使用して簡単なスケッチパッド コードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート