<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>draw</title>
<style>
#canvas {
border: 1px solid #000000;
}
</style>
<script>
//コードは省略
</script>
</head>
<body>
<canvas id="canvas" width="400px" height="300px"></canvas><br>
<input id="pallet" type="color" value="#000000;">
</body>
</html>
canvasの下にカラーパレットのinputタグを追加することで、
canvasの下にカラーパレットを呼び出せるボタンが追加されました。あとはこのパレットで選択した色を描写の際に反映させます。
<script>
var canvas;
var ctx;
//パレット用の変数
var pallet;
var drawFlag = false;
window.onload = function(){
canvas = document.querySelector("#canvas");
ctx = canvas.getContext("2d");
//ここでパレットのオブジェクトを取得しておく
pallet = document.querySelector("#pallet");
canvas.addEventListener("mousemove", function(event){
if (drawFlag === true) {
var x = event.offsetX;
var y = event.offsetY;
//パレットで決めた色を点の描写直前で決めておく
ctx.fillStyle = pallet.value;
ctx.fillRect(x, y, 2, 2);
}
});
canvas.addEventListener("mousedown", function(event){
drawFlag = true;
});
canvas.addEventListener("mouseup", function(event){
drawFlag = false;
});
};
</script>パレットの値は他のアプリでフォームの取得の時と同様でdocument.querySelectorでオブジェクト取得、変数.valueで値を取得という手順をとり、点の描写直前でfillStyleプロパティにカラーコードを入れます。
これでいろんな色でお絵かきできる様になりました。
0 件のコメント:
コメントを投稿