Navigation

    obniz

    obniz Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. SakoDIY
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    SakoDIY

    @SakoDIY

    0
    Reputation
    1
    Posts
    1
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    SakoDIY Follow

    Best posts made by SakoDIY

    This user hasn't posted anything yet.

    Latest posts made by SakoDIY

    • obnizアプリクラウド実行時のcanvasフォントの適用の不具合について

      現在obniz Board 1Yにてhtml上のcanvasで文字や図を描画し、その内容をSPI接続のディスプレイに描画するプログラムを、obniz開発者コンソール上で作成していて、ブラウザ実行では問題なく動作しております。
      しかし、いざクラウド実行の設定(online時実行)をして、テストをすると、文字の色、サイズ、位置等は問題なく適用されるのですが、フォントだけが適用されない(すべてArialの)状態です。何か解決方法はないでしょうか?

      ↓プログラム例(一部省略)

      <html>
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
          <link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet"/>
          <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
          <script src="https://unpkg.com/obniz@3.x/obniz.js" crossorigin="anonymous"></script>
        </head>
        <body>
          <center><canvas id="canvas"></canvas></center>
         <script>
          var obniz = new Obniz("OBNIZ_ID_HERE");
      
          const canvas = document.getElementById("canvas"); //キャンバスのElementを取得
          canvas.width = 880;//横幅設定
          canvas.height = 528;//縦の幅設定
      
          const ctx = canvas.getContext("2d");//キャンバス描画オブジェクトを取得
          ctx.fillStyle = "Black"; //文字色 黒色
          ctx.font = "40px Arial"; //40px のフォントArial
          ctx.fillText("aiueo", 0,40); //X=0,Y=40に「aiueo」を描画
          ctx.fillStyle = "Red" //文字色 赤色
          ctx.fillText("aiueo", 0,80); //X=0,X=80に「aiueo」を描画
          
          ctx.fillStyle = "Black"; //文字色 黒色
          ctx.font = "60px Avenir"; //40px のフォントAvenir
          ctx.fillText("あいうえお", 0,140); //X=0,Y=0に「あいうえお」を描画
          ctx.fillStyle = "Red" //文字色 赤色
          ctx.fillText("あいうえお", 0,200); //X=0,X=40に「あいうえお」を描画
      
          ctx.fillStyle = "Black"; //文字色 黒色
          ctx.font = "80px Nikukyu"; //60px のGoogleFonts「Nikukyu」
          ctx.fillText("アイウエオ", 0,280); //X=0,X=100に「アイウエオ」を描画
          ctx.fillStyle = "Red" //文字色 赤色
          ctx.fillText("アイウエオ", 0,360); //X=0,X=160に「アイウエオ」を描画  
      
          obniz.onconnect = async function () {
          //SPI接続のディスプレイにcanvasを読み取って描画するプログラム(省略)
          }
      

      ↓ブラウザ実行時

      IMG_20210405_133852.jpg

      ↓クラウド実行時

      IMG_20210405_134057.jpg

      posted in Question and Troubles
      SakoDIY
      SakoDIY