描画JS

1 <！DOCTYPE HTML>
 2 <HTML>
 3      <ヘッド>
 4          <メタのcharset = "UTF-8">
 5          <タイトル> </タイトル>
 6          <スタイルタイプ= "テキスト/ CSS">
 7                  #mycanvas {
 8                      ボーダー：1pxの固体;
9                  }
 10                  
11          </スタイル>
 12      </ HEAD>
 13      <body>
 14          <キャンバスID = "mycanvas"幅= "800ピクセル"の高さ= "600PX"> </キャンバス>
 15          の<input type = "色"
         <input type = "ボタン" NAME = "バックアウト" ID = "バックアウト"のonclick = "飛び出し（）"値= "撤销" />
 17          の<input type = "ボタン" NAME = "消しゴム" ID = "消しゴム" onclickの= "消しゴム（）"値= "橡皮" />
 18          の<input type = "範囲" NAME = "範囲1" ID = "範囲1"値= "1"分= "1"最大= "30" />
 19          <スクリプトタイプ= "テキスト/ javascriptの">
 20              VAR缶=のdocument.getElementById（ "mycanvas" ）。
21              VaRの CXT = can.getContext（ "2D" ）。
22              のvarカラーセレクト=のdocument.getElementById（」                          
             カラー= "＃000" ;
26件             のvar imageDatas = 新しいアレイ（）。
27              can.onmousedown = 関数（E）{
 28                  VARの画像データ= cxt.getImageData（0,0,1000,500 ）。
29                  imageDatas.push（画像データ）。
30                  cxt.lineWidth = thickness.value。
31  
32                  cxt.beginPath（）。
33                  cxt.strokeStyle = 色。
34              cxt.moveTo（e.pageX、e.pageY）。
35              document.onmousemove = 関数（E）{
 36                 cxt.lineTo（e.pageX、e.pageY）。
37                  cxt.stroke（）。
38              }
 39              document.onmouseup = 関数（E）{
 40                  document.onmousemove = NULL ;
41                  cxt.closePath（）。
42                  VaRの画像データ= cxt.getImageData（0,0,1000,500 ）。
43                  // はconsole.log（typeof演算（））。
44                  ImageDataを【imagedata.length] = 画像データ。
45              }
 46              }
 47              機能colorchanged（）{
 48                 色= colorselect.value。
49                  にconsole.log（colorselect.value）。
50              }
 51              関数飛び出し（）{
 52                  cxt.putImageData（imageDatas.pop（）、0,0 ）。
53              }
 54              機能消しゴム（）{
 55                  色= "＃1 FFF" 。
56              }
 57          </スクリプト>
 58      </ BODY>
 59 </ HTML>
おすすめ
