バニラjsを使用してパネルを作成(符号化なし)-1
7454 ワード
に板金をはる
ブラシの色、サイズなどを調整します
<canvas id="jsCanvas" class="canvas"></canvas>
<div class="controls">
<div class="controls__colors" id="jsColors">
<div class="controls__color"
style="background-color:#2c2c2c"></div>
(복붙으로 색바꿔서 넣기.)
</div>
</div>bodyについて--
body {
background-color: #f6f9fc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50px;
}キャンバスについて--
.canvas {
width: 700px;
height: 700px;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
0 1px 3px rgba(0, 0, 0, 0.08);
}コントロールの場合--
.controls {
margin-top: 80px;
}
.controls .controls__colors {
display: flex;
}```
버튼들이 아래로 정렬 되게, 플렉스 화면.
그리고 색깔 버튼들에 대해서 --
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
0 1px 3px rgba(0, 0, 0, 0.08);
}```
ボタンのサイズを決定し、border-radiusでボタンを丸くします.cursor: pointer;ロダ
ボタンの上に置くとカーソルがポインタになります.
「保存と移入」ボタン。
保存、塗りつぶしボタンの作成--
じゅうてん
保存＃ホゾン＃
ボタンのデザイン--
.controls__btns button{
all:unset;
cursor: pointer;
background-color: rgb(119, 50, 106);
padding: 8px 0px;
width: 80px;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11),
0 1px 3px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(227, 221, 221, 0.2);
color: rgba(246, 235, 243, 0.7);
text-transform: uppercase;
font-weight: 800;
font-size: 20px;
}結果
ボタンを押す効果を出すには、アクティブなときのサイズを小さくします.
ブラシサイズの調整
調整寸法の範囲を与える.
<div class="controls__range">
<input
type="range"
id="jsRange"
min="0.1"
max="5"
value="2.5"
step="0.1"
/>
</div>.controls .controls__range{
margin-bottom: 30px;
}
結果は
Reference
この問題について(バニラjsを使用してパネルを作成(符号化なし)-1), 我々は、より多くの情報をここで見つけました https://velog.io/@mingi001/바닐라js로-그림판-만들기노마드-코더-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol