マトリックスLEDに文字描画
What's this
MatrixLED_MAX7219 と HTML5 Canvasを使うことで好きな文字を描画します。
Program
<!-- HTML Example -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/obniz@1.9.1/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<br>
<div class="text-center">
<h1>DotMatrix Draw a text</h1>
</div>
<script>
/* This will be over written on obniz.io webapp page */
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
const matrix = obniz.wired("MatrixLED_MAX7219", {vcc:0, gnd:1, din:2, cs:3, clk:4});
matrix.init(8*4, 8);
matrix.brightness(7);
const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);
x = matrix.width;
obniz.repeat(async function(){
ctx.fillStyle = "black";
ctx.fillRect(0, 0, matrix.width, matrix.height);
ctx.fillStyle = "white";
ctx.font = "9px sans-serif";
ctx.fillText('Helloこんにちは안녕하세요你好السلام عليكم', x, 7);
x--;
matrix.draw(ctx);
}, 1000/20)
}
</script>
</body>
</html>
今すぐ実行
HTMLがブラウザで開かれて実行されます。
