캔버스로 만드는 자리표

13770 단어 캔버스자바스크립트jQuery웹
canvas 를 사용하여 간단한 좌석표를 만들어 보았습니다.



index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="zaiseki.js"></script>
<title>在席表</title>
</head>
<body>
<div>
<canvas id="bar_area" width="400" height="600"></canvas>
</div>
<hr />
version Apr/30/2019 AM 09:31<p />
</body>
</html>

zaiseki.js
// -------------------------------------------------------------------------
//  zaiseki.js
//
//                   Jan/03/2018
// -------------------------------------------------------------------------
jQuery  (function ()
{
    const file_json = "status.json"

    jQuery.getJSON (file_json,function (dict_aa)
        {
        display_proc (dict_aa)
        })
})

// -------------------------------------------------------------------------
// [4]:
function display_proc (dict_aa)
{
    var bar = document.getElementById('bar_area')
    var ctx = bar.getContext('2d')

    ctx.font = "18px 'ＭＳ Ｐゴシック'"
    ctx.strokeStyle = "black" 

    const delt_y = 40

    const xx = 100
    var yy = 30
    ctx.strokeText("在席表",xx + 20,yy)

    yy = 70
    ctx.strokeStyle = "blue" 
    for (var key in dict_aa)
        {
        const unit = dict_aa[key]
        ctx.strokeText(unit.name,xx,yy)
        var color = 'red'
        if (unit.office)
            {
            color = 'green'
            } 

        draw_circle_proc (ctx,xx+100,yy-8,color)
        yy += delt_y
        }
}

// -------------------------------------------------------------------------
// [4-4]:
function  draw_circle_proc (ctx,xx,yy,color)
{
    const radius = 10
    ctx.beginPath()
    ctx.fillStyle = color
    ctx.arc (xx,yy,radius,0,Math.PI*2,false)
    ctx.fill()
    ctx.closePath()
    ctx.stroke()
}

// -------------------------------------------------------------------------

status.json
{
"id0001": {"name": "中島","office": true},
"id0002": {"name": "長谷川","office": false},
"id0003": {"name": "藤田","office": false},
"id0004": {"name": "青山","office": true},
"id0005": {"name": "川上","office": true},
"id0006": {"name": "吉田","office": true},
"id0007": {"name": "小林","office": false},
"id0008": {"name": "坂本","office": true},
"id0009": {"name": "安藤","office": false},
"id0010": {"name": "中村","office": true}
}
CreateJS NEXT : Point 클래스에 새롭게 추가되는 메소드를 사용해보기
캔버스에 부드러운 붓 같은 선을 그립니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage