LoginSignup
1

More than 3 years have passed since last update.

Organization

obniz(Node.js)で画面に日本語を表示する

IMG_0755.JPG

node-canvasを使って日本語を描画します。
obnizで対応しているのは2系以上の最新バージョンなので、canvas@nextをダウンロードします。

$ npm i canvas@next

canvasは1.6系(2018年9月現在)なので、obnizでは使えません!

const Obniz = require("obniz");
const { createCanvas } = require('canvas');

var obnizeId = "YOUR-OBNIZ-ID";
var obniz = new Obniz(obnizeId);

obniz.onconnect = async function () {
  obniz.display.clear();
  const canvas = createCanvas(128, 64);
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = "white";
  ctx.font = "15px Avenir";
  ctx.fillText('こんにちは', 0, 20);
  obniz.display.draw(ctx);
}

文字を横にスライドさせてみます。

output4.gif

const Obniz = require("obniz");
const { createCanvas } = require('canvas');

var obnizeId = "YOUR-OBNIZ-ID";
var obniz = new Obniz(obnizeId);

obniz.onconnect = async function () {

  const canvas = createCanvas(128, 64);
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = "white";
  ctx.font = "20px Avenir";

  for (var i = 0; i < 130; i++) {
    obniz.display.clear();
    ctx.fillText('こんにちは', i, 30);
    obniz.display.draw(ctx);
    ctx.clearRect(0, 0, 128, 64)
    await obniz.wait(100);
  }
}

参考:https://obniz.io/doc/sdk/doc/display

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1