MW211 EXIT

devlog
jQuery／jQueryでcanvas！
2018年05月25日 
HTML文(body部)とCSSは以下のような感じ。(たいていはid制御になるだろうが)
┌──────────────────────────────────────┐
│<body>                                                                      │
│<canvas width="100" height="100"></canvas>                                  │
│</body>                                                                     │
├──────────────────────────────────────┤
│<style type="text/css">                                                     │
│canvas {                                                                    │
│    position            :absolute;                                          │
│    top                 :32px;                                              │
│    left                :32px;                                              │
│    height              :400px;     /* 拡大率にあたる */                    │
│    width               :400px;     /* 拡大率にあたる */                    │
│}                                                                           │
│</style>                                                                    │
└──────────────────────────────────────┘
canvasの実サイズは、canvasタグに記載する形になる。
CSSの指定はそれをどういうサイズに引き伸ばして表示するかの指定になる。
よって、上記は「100×100」のcanvasを、「400×400」で表示する指定となり
実質は縦4倍×横4倍の指定ということになる。

で、jQueryで縦と横に11本ずつ線を引いて、「囲」みたいな図を書いた例は以下の通り。
┌──────────────────────────────────────┐
│<script>                                                                    │
│$(function(){                                                               │
│    $('canvas').css({                                                       │
│        'background-color'  :'#EEEEEE',         // 背景色(灰)               │
│    });                                                                     │
│    if ($('canvas')[0].getContext) {                                        │
│        for (var i = 0; i <= 100; i += 10) {                                │
│            var context = $('canvas')[0].getContext('2d');                  │
│            // 縦線                                                         │
│            context.beginPath();                // 開始                     │
│            context.moveTo(i,   0);             // 始点                     │
│            context.lineTo(i, 100);             // 終点                     │
│            context.closePath();                // 終了                     │
│            context.strokeStyle = '#0000FF';    // 線の色(青)               │
│            context.stroke();                   // 描画                     │
│            // 横線                                                         │
│            context.beginPath();                // 開始                     │
│            context.moveTo(  0, i);             // 始点                     │
│            context.lineTo(100, i);             // 終点                     │
│            context.closePath();                // 終了                     │
│            context.strokeStyle = '#FF0000';    // 線の色(赤)               │
│            context.stroke();                   // 描画                     │
│        }                                                                   │
│    }                                                                       │
│});                                                                         │
│</script>                                                                   │
└──────────────────────────────────────┘
「$('canvas')」ではなく、「$('canvas')[0]」を用いる点がミソである。
分類：jQuery