隅歩つ

書いて理解を深める

Pythonでリストの最大値・最小値を取得する

AtCoderPythonでやっています。

Pythonもプログラミングも初心者なので、便利機能を知らずに苦しむことが多いです。

知っていたらすぐにできるのに、知らないためによく苦しんでいます。

リストの最大値

max()にリストを入れます。

a = [70, 55, 47, 69, 91]
print(max(a))
# 91

リストの最小値

min()にリストを入れます。

a = [70, 55, 47, 69, 91]
print(min(a))
# 47

yuuuha.hatenablog.com

HSBの色の番号

色を使うとき、HSBはすごくわかりやすい。

けど、RGBほどイメージはしづらい。

ぱっと目で見てわかるようにp5.jsで作ってみました。

HSBカラー

コードはこちら↓

let cols = 19;
let rows = 19;
let size;

function setup() {
  createCanvas(800, 800);
  colorMode(HSB,360,100,100,100);
  size = width / cols;
}

function draw() {
  background(220);
  for (let i = 0; i < 361; i++) {
    let x = (i % cols) * size;
    let y = Math.floor(i / rows) * size;

    fill(i,100,100,100);
    rect(x, y, size, size);
    
    fill(0,0,0,100);
    textSize(15)
    text(i,x+2,y+size/2);
  }
}

function keyPressed(){
  if(key=='s'){
    saveCanvas('color-number.png')
  }
}

同じ動きでも色が違えば全然印象が変わる。
赤系の時と青系の時ではデザイン自体も変える必要があったりする。

色はしっかり勉強する必要がありそうです。

CodePenを活用したい(Canvasで画面ぴっちり方法)

Canvasで何かを作って残しておくのはむつかしいです。

特に、アニメーションだったり、マウスに反応するものだったりするとむつかしい。

JavaScriptのコードをWebサイトにして残しておけばいいのですが、面倒です。

簡単な作業でブログに残したい。

CodePenを活用

そこで、CodePenを活用できればと思っています。

CodePenは便利で利用は簡単ですが、過去に使った時にうまくいかなかったので避けていました。

しかし、いろんな人がちゃんと使っているので私の使い方が悪かったと思い直して、活用していきたいと思います。

使ってみる

テストで使ってみました。

問題なさそうです。

See the Pen 230718-1 by yusaku (@yuuuha) on CodePen.

ただいつものように作ってしまうと、画面いっぱいにならずに不自然になります。

そこで、CodePen用に画面ぴっちりで作成してみました。

コード

▼ HTML

widthとheightを100%にしてみました。

<canvas id='canvas' width="100%" height='100%'></canvas>

CSS

overflowをhidden、marginをゼロにして、#canvasのwidthを100%にしました。

html {
  overflow: hidden;
}

body {
  margin: 0;
}

#canvas {
  background-color: cornflowerblue;
  width: 100%;
  height: auto;
}

JavaScript

innerWidthとinnerHeightをcanvas.widthとcanvas.heightに入れています。

let canvas, ctx;
let innerWidth, innerHeight;

window.addEventListener("load", () => {
  initial();
  myrender();
});

function initial() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  innerWidth = canvas.width;
  innerHeight = canvas.height;
}

function myrender() {
  ctx.beginPath();
  ctx.arc(innerWidth / 2, innerHeight / 2, 30, 0, Math.PI * 2, false);
  ctx.fillStyle = "white";
  ctx.fill();
}

この場合、pxを使わずに作って方がいいのかな?

yuuuha.hatenablog.com

Canvasでkeydownイベントを使って画像をダウンロードする

CanvasJavaScript)をいじっていると、たまに良いのができる。

そんなときは画像に残したい。

今まではHTMLでbuttonタグを作って、ボタンをクリックしてダウンロードしていました。

yuuuha.hatenablog.com

キーを押してダウンロードする

しかし、マウスを動かすことなしに、その場でダウンロードしたいときが多い。

今回はキーを押してダウンロードする方法を確認してみる。

調べてみると、keydownイベントを使うようです。

developer.mozilla.org

addEventListenerで[keydown]を指定して、event.keyでキーを取れるようです。

[s]キーを押すと、canvasの画像をダウンロードできるようにしてみました。

document.addEventListener('keydown', (e) => {
        if (e.key === 's') {
            let a = document.createElement('a')
            a.href = canvas.toDataURL('image/png', 1.0)
            a.download = 'canvas_0717-1'
            a.click()
        }
    })

上記のように小文字の「s」だとテキストを入力する場合は不便そうなので、大文字にしたりあまり使わないキーを割り当てるほうがいいかもしれません。

JavaScriptのCanvasでテキストを使う

JavaScriptCanvasを勉強中です。

今回はテキスト(文字)を入れる方法を確認します。

テキストを使う方法

テキストを入れる場合は、「ctx.font」を使います。

ctx.font = '60px serif'

▼ テキストの色の設定

色の設定は図形などと同じです。

ctx.fillStyle = 'black'

▼ テキストの中心の設定

ctx.textAlign = 'center'

他には、"left"や"right"があります。

developer.mozilla.org

▼ テキストの高さの設定

ctx.textBaseline = 'middle'

他には、"top"、"hanging"、"alphabetic"などがあります。

developer.mozilla.org

▼ テキストの配置

テキストの配置は「ctx.fillText」を使います。

ctx.fillText(
    'テキスト',
    canvas.width / 2(x軸の位置),
    canvas.height / 2(y軸の位置)
)

比較的に簡単に設定できました。

実例

実際に入れてみました↓

Canvasでテキストを使う

以下がコードです。

ctx.fillStyle = 'black'
ctx.font = '60px serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(
    'JavaScriptのCanvasでテキストを使う',
    canvas.width / 2,
    canvas.height / 2
)

あとは、Google Fontsなども試してみようと思います。

yuuuha.hatenablog.com