今週はキャンバスを学んでいます
キャンバスは、同様のキャンバス内に埋め込まれた埋め込み要素であります
製図板は、あまりにもマウスでキャンバスに描くことができています
そして、あなたは線の太さの色を変更する必要があります
クリア描画ボード三つの小さな機能
注意点
あなたは、現在のマウス位置を取得する必要があります
我々は、マウスの位置と対応する描画ボードを取得する必要があるときにマウスクリックをしたとき
位置左の位置は、マウスの位置とページを取得event.clientXノート
位置にあるcanvas要素はoffsetLeftページを取得するとき
これは、キャンバス要素でマウスに2つの位置を減算することにより得られます。
あなたは、イベントが影響したクリアする必要があるときに、マウスを持ち上げ
1 <！DOCTYPE HTML > 2 < HTML のlang = "EN" > 3 4 < ヘッド> 5 < メタのcharset = "UTF-8" > 6 < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0 " > 7 < メタHTTP-当量=" X-UA-互換」コンテンツ= "IE =縁" > 8 < タイトル> 画布 9 10 < スタイル> 12 #myCan { 13 境界：1ピクセル固体。 14 } 15 16 .color { 17 表示：インラインブロック。 18 幅：25ピクセル。 19 高さ：25ピクセル; 20 マージン：0 5pxの; 21 } 22 </ スタイル> 23 </ ヘッド> 24 25 <本体> 26 < キャンバスID = "myCan" 幅= "500" 高さ= "500" > </ キャンバス> 27 < DIV > 28 < ボタンのonclick = "clearCanvas（）" スタイル= "フロート：左;" >清除画布</ ボタン> 29 < divのクラス= "色" スタイル= "背景色：赤;" onclickの= "changeColor（ '赤'）" > </ DIV > スタイル=「背景色：青;」onclickの= "changeColor（ '青'）" > </ DIV > 31 < DIV クラス= "色" スタイル= "背景色：黒;" onclickの= "changeColor（ 'ブラック'）" > </ DIV > 32 < DIV クラス= "色" スタイル= "背景色：緑;" onclickの= "changeColor（ 'グリーン'）" > </ DIV > 33 < DIV クラス= "色" スタイル=「背景色：黄色;」onclickの= "changeColor（ '黄色'）"> </ DIV > 34 < DIV クラス= "色" スタイル= "背景色：白;" onclickの= "changeColor（ '白'）" > </ DIV > 35 < 入力タイプ= "範囲" ID = "範囲" スタイル= "マージン左：10pxの;" 分= "1" 最大= "10" のonchange = "changeWidth（this.value）" > 36 </ DIV > 37 < スクリプト> myCan " ）; 39 // はconsole.log（C）; 40 41 VARのペン= c.getContext（' 2D ' ）; 42 にconsole.log（PEN）; 43 LET色= document.getElementsByClassName（" カラー」）; 44 pen.lineWidth = 5 ; 45 46 c.onmousedown = 関数（E）{ 47 VARのEV = E || window.event; 48 49 pen.beginPath（）; 50 はconsole.log（" 1 " ）。 51 pen.moveTo（ev.clientX - c.offsetLeft、ev.clientY - c.offsetTop）。 52 document.onmousemove = 関数（）{ 53 VAR EV = EV || window.event; 54 pen.lineTo（ev.clientX - c.offsetLeft、ev.clientY - c.offsetTop）。 55 pen.stroke（）。 56 // はconsole.log（ "1"）。 57 }。 58 }。 59 pen.closePath（）。// 端绘画路径 60 61 c.onmouseup = 関数（）{ 62 document.onmousedown = NULL ; 63 document.onmousemove = NULL ; 64 } 65 66 LETのclearCanvas = 関数（）{ 67 // c.clearRect（0,0、c.width、c.height）。 68 pen.clearRect（0 、0 、500、500 ）。 69 } 70 changeColorせ= 関数（STR）{ 71 pen.strokeStyle = STRと、 72 のために（LET I = 0 ; iは< ; color.length iは++ ）{ 73 色[I] .style.boxShadow = "" ; 74 } 75 event.target.style.boxShadow = " 0 0 8px黒" 。 76 } 77 78 機能changeWidth（I）{ 79 pen.lineWidth = I。 80 にconsole.log（pen.lineWidth）。 81 } 82 </ スクリプト> 83 </ ボディ> 84 85 </ HTML >