Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

mobingi-inc
簡単な作業でパブリッククラウドの環境構築・運用を自動化できるMobingiALMや、クラウドコスト管理ツールを開発しているスタートアップ企業です。
https://mobingi.com/jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away