TIL 9|パレット+、html/css/js接続、ブラウザイベント
🎨 イメージボードreset btnの追加 <!--html-->
<button id="jsReset">Reset</button>
//javascript
const resetBtn = document.getElementById("jsReset");
if(resetBtn){
resetBtn.addEventListener("click", handleResetClick)
}
function handleResetClick(){
ctx.fillStyle = "white"
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
HTML/CSS/JS接続
html-css
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>PaintJS</title>
</head>
<!--head태그 사이에 <link rel="stylesheet" href="블라블라.css"> -->
html,css - javascript
<!--html-->
<button id="jsReset">Reset</button>//javascript
const resetBtn = document.getElementById("jsReset");
if(resetBtn){
resetBtn.addEventListener("click", handleResetClick)
}
function handleResetClick(){
ctx.fillStyle = "white"
ctx.fillRect(0, 0, canvas.width, canvas.height);
}html-css
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>PaintJS</title>
</head>
<!--head태그 사이에 <link rel="stylesheet" href="블라블라.css"> -->html,css - javascript
<script src="app.js"></script> <script>
console.log("hi")
</script>
htmlドキュメント内のすべての要素を定義およびアクセスします.
const saveBtn = document.getElementById("jsSave");
const colors = document.getElementsByClassName("jsColor");ブラウザイベント
マウスイベント
イベントハンドラ
イベントハンドラは、イベントが発生したときに実行される関数で、ユーザーの動作にどのように応答するかをコードで表します.onclick(html)/.onclick(JavaScript)として指定できます.
addEventListener
onclick(html)/.onclick(JavaScript)では、1つのイベントに複数を割り当てることができないという問題があります.この問題を解決するためにaddEventListenerを使用することができる.
//기본문법
element.addEventListener(event, handler, [options]);if(canvas){
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", stopPainting);
canvas.addEventListener("mouseleave", stopPainting);
canvas.addEventListener("click", handleCanvasClick);
canvas.addEventListener("contextmenu",handleCM);
};イベントオブジェクト
イベントが発生すると、ブラウザはこのコンパクトなオブジェクトを作成します.オブジェクトにイベントの詳細を追加し、Handlerに引数として渡します.
オブジェクトシェイプのハンドラとhandleEvent
addEventListenerを使用して、オブジェクトをイベントハンドラとして割り当てることができます.イベントが発生すると、オブジェクト上で実装されるhandleEventメソッドが呼び出されます.
https://ko.javascript.info/introduction-browser-events
VS CODE
一度ドラッグ!
ショートカットの保存
画面サイズのショートカット
Reference
この問題について(TIL 9|パレット+、html/css/js接続、ブラウザイベント), 我々は、より多くの情報をここで見つけました https://velog.io/@dabin0219/TIL-9-그림판テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol