月別アーカイブ: 2020年1月

HTML5, JavaScript

複数のcanvasをレスポンシブに配置

小さいcanvasをレスポンシブに配置するテスト

こんなのできる．一色ずつcanvas作成

要bootstrap4，jQuery

（任意）

chroma.jsライブラリ読み込み

    <!--chroma.jsライブラリ読み込み-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>

スタイルシート作成（レスポンシブ用）

    <style>
    .wrapper{
  width: 100%;
  height: 100%;
}</style>

 

canvasの外側のDIV作成　wrapperクラスのサイズ

<div id="scales" class="wrapper"></div>

 

JSでcanvasを複数作成

<script>
    
    //chroma.js使用
var scales = document.getElementById('scales');
var color_list = chroma.scale(['blue', 'crimson']);//blueからcrimsonへの色変更
var divide = 5;//色変更の分割数
var i;

    //forでcanvasを複数作成
for (i = 1; i <=divide; i++) {
    
    //canvasを次々作成
    var mem_canvas;
    mem_canvas = document.createElement("canvas");
    mem_canvas.setAttribute("id","scaleCanvas" + i);//ID変更し複数作成可能に
    
    //jQueryでこのDIVの縦横を取得
    var w = $('.wrapper').width();
    var h = $('.wrapper').height();//未使用
    mem_canvas.width = w/divide;//canvas幅はwrapper÷分割数にする
    mem_canvas.height = w/divide;//正方形にする
    //作成するcanvasのCSS設定
    mem_canvas.style.width = (100/divide) + '%';//canvasに独自のCSSを入れる
    mem_canvas.style.height = 'auto';//高さはwrapper比にはできないんでautoにする    
    //色を塗る
    var context = mem_canvas.getContext('2d');
    context.fillStyle = color_list(i/divide);//
    context.fillRect(0, 0, w/divide, w/divide);//正方形に塗りつぶす
    //HTMLに追加
    scales.appendChild(mem_canvas);//親のDIV scalesに子として追加
}
    
    </script>

 

参考

http://shiru-web.com/2017/04/20/01-24/

https://qiita.com/ShinyaOkazawa/items/9e662bf2121548f79d5f

HTML5, JavaScript

Bootstrap4でcanvasをレスポンシブ

メモ

cssファイル読み込むか，headあたりに<style>で以下を入れる

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

 

canvasを作成

<canvas id="canvas" width="300" height="300">
</canvas>

 

JS実行（jquery)

$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

 

 

参考

https://stackoverflow.com/questions/23973932/responsive-canvas-in-bootstrap-column/23974225

メディア工学特別講義Ａ, 授業用

得点に応じてパネルと切り替える

得点に応じてパネルと切り替えるスクリプトです

Badgeに応用できます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //UI使用する

public class panelSelector : MonoBehaviour
{

    //ゲームオブジェクトを変数に入れる
    public GameObject panel1;
    public GameObject panel2;
    public GameObject panel3;

    //UI要素
    public Text scoreText;
    int myScore;


    //スタート時初期設定
    void Start()
    {
        //起動時にパネル1のみ表示させ,2，3は非表示（初期画面的なやつ）
        panel1.SetActive(true);
        panel2.SetActive(false);
        panel3.SetActive(false);

        myScore = 0;
        scoreText.text = myScore.ToString();
    }

    //とくになにもやってない
    void Update()
    {

    }

    //このオブジェクトに当たったときに実行
    private void OnTriggerEnter(Collider other)
    {

        if (other.gameObject.tag == "red")//タグがredなら10加算
        {
            myScore += 10;
            scoreText.text = myScore.ToString();
            Destroy(other.gameObject);
        }
        else if (other.gameObject.tag == "gold")//tagがgoldなら50加算
        {
            myScore += 50;
            scoreText.text = myScore.ToString();
            Destroy(other.gameObject);
        }
        scoreCheck(myScore);//関数scoreCheckを実行，引数にスコアを変数で渡す

    }

    //スコアをチェックしスコアに応じてパネルを表示，非表示する
    void scoreCheck(int myScoreSend)
        {
            if (myScoreSend > 99 && myScoreSend < 200)//100以上200未満
            {
                panel1.SetActive(false);
                panel2.SetActive(true);
                panel3.SetActive(false);
            }
            else if (myScoreSend > 199)//200以上
            {
                panel1.SetActive(false);
                panel2.SetActive(false);
                panel3.SetActive(true);
            }
        }
    }

実装例です

100点越でパネル（右上）が緑に，200点超えで赤になります

実行動画（コインが後ろに落ちて得点されています）