キャンバスラインの品質が悪く、キャンバス座標とhtmlとの比較

Question

1）私はキャンバスラインを練習しています。キャンバスタグのサイズを変更して、線を引いてみました。しかし、その線はぼやけている。なぜそれが起こるのか、どのように変更するのですか？

2）私は2番目の質問があります：キャンバスタグの内部にタグliとラインの座標を接続することは可能ですか？例えば、li項目をクリックしたいとき、二次曲線の端はli項目にまっすぐに動くはずです。

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.lineWidth = 100; 
 
ctx.lineWidth = 1; // толщина линии 
 
ctx.moveTo(11, 100); //передвигаем перо 
 
ctx.lineTo(350, 100); //рисуем линию 
 
ctx.fillStyle = "purple"; 
 
ctx.strokeStyle = "purple"; 
 
ctx.stroke(); 
 
ctx.lineWidth=100; 
 
ctx.lineWidth= 1; 
 
ctx.moveTo(11,100); 
 
ctx.quadraticCurveTo(26, 0, 50, 100); 
 
ctx.stroke();

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.ruler { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: url("sprite.webp") no-repeat; 
 
    padding-bottom: 67px; 
 
    width: 877px; 
 
    margin: 0 auto; 
 
} 
 

 
.ruler-container { 
 
    white-space: nowrap; 
 
    margin: 0 auto; 
 
    max-width: 960px; 
 
    padding-top: 270px; 
 
} 
 

 
.ruler-list li { 
 
    list-style-type: none; 
 
    display: flex; 
 
} 
 

 
.ruler-list__item { 
 
    font-size: 22px; 
 
    margin-right: 35px; 
 
    margin-left: -7px; 
 
} 
 

 
.double__numbers { 
 
    margin-right: 24px; 
 
} 
 

 
.bold { 
 
    /*margin-top: -4px;*/ 
 
    font-weight: bold; 
 
} 
 

 
.ruler-list { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin-top: 19px; 
 
    margin-left: 30px; 
 
    padding: 0; 
 
} 
 

 
.ruler-axis { 
 
    width: 813px; 
 
    height: 2px; 
 
    background-color: #000000; 
 
    margin-left: 33px; 
 
    margin-top: 20px; 
 
    position: relative; 
 
} 
 

 
.ruler-axis__item-block { 
 
    position: relative; 
 
    width: 11px; 
 
    height: 1px; 
 
    transform: rotate(90deg); 
 
    background-color: #000000; 
 
    top: -12px; 
 
    margin-right: 31px; 
 
    margin-left: -7px; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
} 
 

 
.ruler-axis::before { 
 
    content: " "; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 2px; 
 
    right: -4px; 
 
    top: 6px; 
 
    transform: rotate(-46deg); 
 
    background-color: #000000; 
 
} 
 

 
.ruler-axis::after { 
 
    content: " "; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 2px; 
 
    right: -4px; 
 
    top: -6px; 
 
    transform: rotate(46deg); 
 
    background-color: #000000; 
 
} 
 

 
.double { 
 
    margin-right: 34px; 
 
} 
 

 
input[type='number'] { 
 
    -moz-appearance: textfield; 
 
} 
 

 
input::-webkit-outer-spin-button, 
 
input::-webkit-inner-spin-button { 
 
    -webkit-appearance: none; 
 
} 
 

 
.user-input { 
 
    display: flex; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    margin-bottom: 95px; 
 
} 
 

 
input[type='number'] { 
 
    padding-bottom: 0; 
 
    text-align: center; 
 
    padding-top: 0; 
 
    padding-left: 0; 
 
    width: 76px; 
 
    font-size: 66px; 
 
} 
 

 
span { 
 
    display: block; 
 
} 
 

 
#canvas { 
 
    position: absolute; 
 
    width: 818px; 
 
    height: 132px; 
 
    margin-top: -68px; 
 
} 
 

 
.user-input span { 
 
    font-size: 75px; 
 
    margin-left: 20px; 
 
} 
 

 
.input__container { 
 
    margin-left: 21px; 
 
    margin-top: 0; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"></script> 
 
<main class="main-class"> 
 
    <div class="ruler-container"> 
 
    <div class="user-input"> 
 
     <span class="user-input__number">7</span> 
 
     <span class="user-input__sign">+</span> 
 
     <span class="user-input__number">8</span> 
 
     <span class="user-inupt__total">=</span> 
 
     <span class="user-inupt__mockup">?</span> 
 
     <div class="input__container hidden"> 
 
     <label for="result" class="input-container__label"> 
 
      <input type="number" max="500" class="input-container__input-block" id="result"> 
 
     </label> 
 
     </div> 
 
    </div> 
 
    <div class="ruler"> 
 
     <div class="ruler-axis"> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     </div> 
 
     <canvas id="canvas"> 
 
       Your browser does not support the HTML5 canvas tag.</canvas> 
 
     <ul class="ruler-list"> 
 
     <li class="ruler-list__item bold">0</li> 
 
     <li class="ruler-list__item">1</li> 
 
     <li class="ruler-list__item">2</li> 
 
     <li class="ruler-list__item">3</li> 
 
     <li class="ruler-list__item">4</li> 
 
     <li class="ruler-list__item bold">5</li> 
 
     <li class="ruler-list__item">6</li> 
 
     <li class="ruler-list__item">7</li> 
 
     <li class="ruler-list__item">8</li> 
 
     <li class="ruler-list__item">9</li> 
 
     <li class="ruler-list__item bold double__numbers">10</li> 
 
     <li class="ruler-list__item double__numbers">11</li> 
 
     <li class="ruler-list__item double__numbers">12</li> 
 
     <li class="ruler-list__item double__numbers">13</li> 
 
     <li class="ruler-list__item double__numbers">14</li> 
 
     <li class="ruler-list__item double__numbers">15</li> 
 
     <li class="ruler-list__item double__numbers">16</li> 
 
     <li class="ruler-list__item double__numbers">17</li> 
 
     <li class="ruler-list__item double__numbers">18</li> 
 
     <li class="ruler-list__item double__numbers">19</li> 
 
     <li class="ruler-list__item bold double__numbers">20</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</main>

Answer 1

あなたはスケーリングの代わりに、リサイズ結果として行われる描画した後適用されるスタイルの幅と高さを指定。

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.strokeStyle = "purple"; 
 
ctx.lineWidth= 1; 
 
ctx.moveTo(32,90); 
 
ctx.quadraticCurveTo(96, 0, 160, 90); 
 
ctx.stroke();

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.ruler { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: url("sprite.webp") no-repeat; 
 
    padding-bottom: 67px; 
 
    width: 877px; 
 
    margin: 0 auto; 
 
} 
 

 
.ruler-container { 
 
    white-space: nowrap; 
 
    margin: 0 auto; 
 
    max-width: 960px; 
 
    padding-top: 270px; 
 
} 
 

 
.ruler-list li { 
 
    list-style-type: none; 
 
    display: flex; 
 
} 
 

 
.ruler-list__item { 
 
    font-size: 22px; 
 
    margin-right: 35px; 
 
    margin-left: -7px; 
 
} 
 

 
.double__numbers { 
 
    margin-right: 24px; 
 
} 
 

 
.bold { 
 
    /*margin-top: -4px;*/ 
 
    font-weight: bold; 
 
} 
 

 
.ruler-list { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin-top: 19px; 
 
    margin-left: 30px; 
 
    padding: 0; 
 
} 
 

 
.ruler-axis { 
 
    width: 813px; 
 
    height: 2px; 
 
    background-color: #000000; 
 
    margin-left: 33px; 
 
    margin-top: 20px; 
 
    position: relative; 
 
} 
 

 
.ruler-axis__item-block { 
 
    position: relative; 
 
    width: 11px; 
 
    height: 1px; 
 
    transform: rotate(90deg); 
 
    background-color: #000000; 
 
    top: -12px; 
 
    margin-right: 31px; 
 
    margin-left: -7px; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
} 
 

 
.ruler-axis::before { 
 
    content: " "; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 2px; 
 
    right: -4px; 
 
    top: 6px; 
 
    transform: rotate(-46deg); 
 
    background-color: #000000; 
 
} 
 

 
.ruler-axis::after { 
 
    content: " "; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 2px; 
 
    right: -4px; 
 
    top: -6px; 
 
    transform: rotate(46deg); 
 
    background-color: #000000; 
 
} 
 

 
.double { 
 
    margin-right: 34px; 
 
} 
 

 
input[type='number'] { 
 
    -moz-appearance: textfield; 
 
} 
 

 
input::-webkit-outer-spin-button, 
 
input::-webkit-inner-spin-button { 
 
    -webkit-appearance: none; 
 
} 
 

 
.user-input { 
 
    display: flex; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    margin-bottom: 95px; 
 
} 
 

 
input[type='number'] { 
 
    padding-bottom: 0; 
 
    text-align: center; 
 
    padding-top: 0; 
 
    padding-left: 0; 
 
    width: 76px; 
 
    font-size: 66px; 
 
} 
 

 
span { 
 
    display: block; 
 
} 
 

 
#canvas { 
 
    position: absolute; 
 
    margin-top: -68px; 
 
} 
 

 
.user-input span { 
 
    font-size: 75px; 
 
    margin-left: 20px; 
 
} 
 

 
.input__container { 
 
    margin-left: 21px; 
 
    margin-top: 0; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"></script> 
 
<main class="main-class"> 
 
    <div class="ruler-container"> 
 
    <div class="user-input"> 
 
     <span class="user-input__number">7</span> 
 
     <span class="user-input__sign">+</span> 
 
     <span class="user-input__number">8</span> 
 
     <span class="user-inupt__total">=</span> 
 
     <span class="user-inupt__mockup">?</span> 
 
     <div class="input__container hidden"> 
 
     <label for="result" class="input-container__label"> 
 
      <input type="number" max="500" class="input-container__input-block" id="result"> 
 
     </label> 
 
     </div> 
 
    </div> 
 
    <div class="ruler"> 
 
     <div class="ruler-axis"> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     <div class="ruler-axis__item-block"></div> 
 
     </div> 
 
     <canvas width=818 height=132 id="canvas"> 
 
       Your browser does not support the HTML5 canvas tag.</canvas> 
 
     <ul class="ruler-list"> 
 
     <li class="ruler-list__item bold">0</li> 
 
     <li class="ruler-list__item">1</li> 
 
     <li class="ruler-list__item">2</li> 
 
     <li class="ruler-list__item">3</li> 
 
     <li class="ruler-list__item">4</li> 
 
     <li class="ruler-list__item bold">5</li> 
 
     <li class="ruler-list__item">6</li> 
 
     <li class="ruler-list__item">7</li> 
 
     <li class="ruler-list__item">8</li> 
 
     <li class="ruler-list__item">9</li> 
 
     <li class="ruler-list__item bold double__numbers">10</li> 
 
     <li class="ruler-list__item double__numbers">11</li> 
 
     <li class="ruler-list__item double__numbers">12</li> 
 
     <li class="ruler-list__item double__numbers">13</li> 
 
     <li class="ruler-list__item double__numbers">14</li> 
 
     <li class="ruler-list__item double__numbers">15</li> 
 
     <li class="ruler-list__item double__numbers">16</li> 
 
     <li class="ruler-list__item double__numbers">17</li> 
 
     <li class="ruler-list__item double__numbers">18</li> 
 
     <li class="ruler-list__item double__numbers">19</li> 
 
     <li class="ruler-list__item bold double__numbers">20</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</main>

Answer 2

提案基づいて回答。レスポンス・グラフィックがyouは、戻り値で関数を使用する必要がありwant If

は、HERESに例を示します。

ctx.moveTo(11, 100); //передвигаем перо 

は、それはこのように見えるように：

ctx.moveTo(setWidthInPer(50) , setHeightInPer(50)); 

や活用変数直接的、

var DOTX1 = 50 , DOTY1 = 50; 
    ctx.moveTo(setWidthInPer(DOTX1) , setHeightInPer(DOTY1)); 

// **Now you can update position with simple DOTX1 = 25 ....in any time** . 

ヘルプ機能：

function setWidthInPer (per){ 
    // per = 1 will return 1% of window width always 
    return window.innerWidth/100 * per; 

    } 

    function setHeightInPer (per){ 

    return window.innerHeight/100 * per; 

    } 

この手順を使用する場合、window.onresizeの特別な操作は必要ありません。

また、すべての描画コードをself呼び出し関数、animframerequestまたはsetInteval（レンダリング速度を変更したい場合）に入れることができます。

例：すでに使用している場合

function draw() { 


    ctx.lineWidth = 100; 
    ctx.lineWidth = 1; // толщина линии 
    ctx.moveTo(11, 100); //передвигаем перо 
    ctx.lineTo(350, 100); //рисуем линию 
    ctx.fillStyle = "purple"; 
    ctx.strokeStyle = "purple"; 
    ctx.stroke(); 
    ctx.lineWidth=100; 
    ctx.lineWidth= 1; 
    ctx.moveTo(11,100); 
    ctx.quadraticCurveTo(26, 0, 50, 100); 
    ctx.stroke(); 
    window.requestAnimationFrame(draw); 

} 

window.requestAnimationFrame(draw); 

重要キャンバス、キャンバスにそれをすべて行い、李のための必要性や任意の古典的なhtmlタグは、（悪いことはできません）。

キャンバスで定規を描きます。