HTML "Range"入力の問題

Question

範囲が最大に設定されているときに正方形のキャンバス全体を青い四角で覆うスライダープログラムを作成しようとしています。

1. 私のスライダーを動かし、それは代わりに、正方形の矩形を生成します。私も持ってる2つの問題があります。

2. 私のスライダの四角形の最大値は、キャンバスの半分以下です。

私のプロジェクトはCodepenで行い、スライダのコードは以下のとおりです。完全な詳細が必要な場合は、私のペンへのリンクがあります：https://codepen.io/drummerlover33/pen/EXdobV。

function doSquare() { 
    var slider = document.getElementById("colorSlider"); 
    var sliderValue = slider.value; 
    var canvas = document.getElementById("mainCanvas"); 
    var canvasContext = canvas.getContext("2d"); 
    canvasContext.clearRect(0,0,canvas.width,canvas.height); 
    canvasContext.fillStyle = "blue"; 
    canvasContext.fillRect(0,0,sliderValue,sliderValue); 
} 

あなたは初心者を助けることができますように！

ありがとうございます！

Answer 1

キャンバスのwidthとheight属性は、キャンバスのサイズだけでなく、解像度も設定します。属性（またはスクリプト）を使用してwidthとheightを設定しないと、キャンバスのデフォルト解像度は300px x 150pxになります。

CSSを使用してサイズを設定すると、キャンバス要素（スタイル）の外側のサイズのみが設定されます。 canvas要素には、width属性とheight属性を明示的に設定する必要があります。このため

// Remnant function from previous case 
 
function doRed() { 
 
    var canvasElements = document.getElementById("mainCanvas"); 
 
    canvasElements.style.backgroundColor = "red"; 
 
} 
 
// END of remnant function 
 

 
var slider = document.getElementById("colorSlider"); 
 
var canvas = document.getElementById("mainCanvas"); 
 
var canvasContext = canvas.getContext("2d"); 
 

 
function doSquare() { 
 
    var sliderValue = slider.value; 
 
    canvasContext.clearRect(0, 0, canvas.width, canvas.height); 
 
    canvasContext.fillStyle = "blue"; 
 
    canvasContext.fillRect(
 
    0, 
 
    0, 
 
    sliderValue, 
 
    sliderValue 
 
); 
 
} 
 

 
function doColor() { 
 
    var canvasElements = document.getElementById("mainCanvas"); 
 
    var pickedColor = document.getElementById("colorInput").value; 
 
    canvasElements.style.backgroundColor = pickedColor; 
 
}

<h1>Inputs and Events</h1> 
 
<canvas id="mainCanvas" height="100px" width="100px"></canvas> 
 

 
<p> 
 
    <input type="range" min="0" max="100" value="0" id="colorSlider" oninput="doSquare()"> 
 

 
    <input type="color" value="#ffffff" id="colorInput" onchange="doColor()"> 
 
</p>