gaogao-9/CanvasRenderingContext2D.js

## CanvasRenderingContext2D.js
const drawHueCircle = Symbol("drawHueCircle");
const drawSVRect    = Symbol("drawSVRect");
Object.defineProperties(CanvasRenderingContext2D.prototype, {
    [drawHueCircle]: {
        value(x, y, rIn, rOut, splitNum=180){
            // 描画半径を計算で求める
            const r    = 2 * rOut;

            // 直前のスタイル情報のバックアップ
            const oldStrokeStyle = this.strokeStyle;
            const oldFillStyle   = this.fillStyle;
            this.save();

            this.beginPath();

            this.arc(x, y, rIn,  Math[toRad](360),  Math[toRad](0),   true);
            this.arc(x, y, rOut, Math[toRad](0),    Math[toRad](360), false);
            this.clip();

            for(let i=0;i<splitNum;++i){
                const nowRad  = Math[toRad](360/splitNum * i);
                const nextRad = Math[toRad](360/splitNum * (i+1));

                this.beginPath();

                this.strokeStyle = this.fillStyle = `hsl(${360/splitNum*i + 60}, 100%, 50%)`;

                this.moveTo(x, y);
                this.lineTo(x + r*Math.sin(nowRad),  y - r*Math.cos(nowRad));
                this.lineTo(x + r*Math.sin(nextRad), y - r*Math.cos(nextRad));
                this.lineTo(x, y);
                this.fill();
                this.stroke();
            }

            this.closePath();

            // スタイル情報を適用前の状態に戻す
            this.strokeStyle = oldStrokeStyle;
            this.fillStyle   = oldFillStyle;
            this.restore();
        },
    },
    [drawSVRect]: {
        value(x, y, size, hue=0){

            // 直前のスタイル情報のバックアップ
            const oldFillStyle   = this.fillStyle;
            this.save();

            // Saturation線形グラデーションの作成
            const satGrad = this.createLinearGradient(x, y, x+size, y);
            satGrad.addColorStop(0.0 ,`hsl(${hue}, 100%, 100%)`);
            satGrad.addColorStop(1.0 ,`hsl(${hue}, 100%, 50%)`);

            // 描画
            this.fillStyle = satGrad;
            this.fillRect(x, y, size, size);

            // Value線形グラデーションの作成
            const valGrad = this.createLinearGradient(x, y, x, y+size);
            valGrad.addColorStop(0.0 ,"rgba(0, 0, 0, 0)");
            valGrad.addColorStop(1.0 ,"rgba(0, 0, 0, 1)");

            // 描画
            this.fillStyle = valGrad;
            this.fillRect(x, y, size, size);

            // スタイル情報を適用前の状態に戻す
            this.fillStyle   = oldFillStyle;
            this.restore();
            this.closePath();
        }
    },
});

## index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>テストキャンバス</title>
        <script src="Math.js"></script>
        <script src="CanvasRenderingContext2D.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <canvas id="canv" width="200" height="200" style="background-color:white;border:1px solid black;"></canvas>
    </body>
</html>

## index.js
document.addEventListener("DOMContentLoaded", (eve)=>{
    const ctx = document.getElementById("canv").getContext("2d");

    // 中心座標の指定
    const cx = 100;
    const cy = 100;

    // 円の半径を指定
    const rIn  = 50;
    const rOut = 80;

    // 四角形のサイズを指定
    const size = rIn * Math.sqrt(2);

    // 四角形の右上の座標を指定(中心から半分のサイズだけ左上の座標)
    const rx = cx - size/2;
    const ry = cy - size/2;

    // 今回作った関数でHSVスライダーをレンダリング
    ctx[drawHueCircle](cx, cy, rIn, rOut);
    ctx[drawSVRect](rx, ry, size, 0);

    // 適当に枠線を作る
    ctx.lineWidth   = 1;
    ctx.strokeStyle = "#aaaaaa";

    // 円形スライダーの枠線
    ctx.beginPath();
    ctx.arc(cx, cy, rIn,  Math[toRad](360), Math[toRad](0));
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(cx, cy, rOut, Math[toRad](360), Math[toRad](0));
    ctx.stroke();

    // 正方形スライダーの枠線
    ctx.beginPath();
    ctx.rect(rx, ry, size, size);
    ctx.stroke();
}, false);

## Math.js
const toRad   = Symbol("toRad");
const fromRad = Symbol("fromRad");
Object.defineProperties(Math, {
    [toRad]: {
        value(num){ return num*Math.PI / 180; }
    },
    [fromRad]: {
        value(num){ return num*180 / Math.PI; }
    },
});
	const drawHueCircle = Symbol("drawHueCircle");
	const drawSVRect = Symbol("drawSVRect");
	Object.defineProperties(CanvasRenderingContext2D.prototype, {
	[drawHueCircle]: {
	value(x, y, rIn, rOut, splitNum=180){
	// 描画半径を計算で求める
	const r = 2 * rOut;

	// 直前のスタイル情報のバックアップ
	const oldStrokeStyle = this.strokeStyle;
	const oldFillStyle = this.fillStyle;
	this.save();

	this.beginPath();

	this.arc(x, y, rIn, Math[toRad](360), Math[toRad](0), true);
	this.arc(x, y, rOut, Math[toRad](0), Math[toRad](360), false);
	this.clip();

	for(let i=0;i<splitNum;++i){
	const nowRad = Math[toRad](360/splitNum * i);
	const nextRad = Math[toRad](360/splitNum * (i+1));

	this.beginPath();

	this.strokeStyle = this.fillStyle = `hsl(${360/splitNum*i + 60}, 100%, 50%)`;

	this.moveTo(x, y);
	this.lineTo(x + rMath.sin(nowRad), y - rMath.cos(nowRad));
	this.lineTo(x + rMath.sin(nextRad), y - rMath.cos(nextRad));
	this.lineTo(x, y);
	this.fill();
	this.stroke();
	}

	this.closePath();

	// スタイル情報を適用前の状態に戻す
	this.strokeStyle = oldStrokeStyle;
	this.fillStyle = oldFillStyle;
	this.restore();
	},
	},
	[drawSVRect]: {
	value(x, y, size, hue=0){

	// 直前のスタイル情報のバックアップ
	const oldFillStyle = this.fillStyle;
	this.save();

	// Saturation線形グラデーションの作成
	const satGrad = this.createLinearGradient(x, y, x+size, y);
	satGrad.addColorStop(0.0 ,`hsl(${hue}, 100%, 100%)`);
	satGrad.addColorStop(1.0 ,`hsl(${hue}, 100%, 50%)`);

	// 描画
	this.fillStyle = satGrad;
	this.fillRect(x, y, size, size);

	// Value線形グラデーションの作成
	const valGrad = this.createLinearGradient(x, y, x, y+size);
	valGrad.addColorStop(0.0 ,"rgba(0, 0, 0, 0)");
	valGrad.addColorStop(1.0 ,"rgba(0, 0, 0, 1)");

	// 描画
	this.fillStyle = valGrad;
	this.fillRect(x, y, size, size);

	// スタイル情報を適用前の状態に戻す
	this.fillStyle = oldFillStyle;
	this.restore();
	this.closePath();
	}
	},
	});
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>テストキャンバス</title>
	<script src="Math.js"></script>
	<script src="CanvasRenderingContext2D.js"></script>
	<script src="index.js"></script>
	</head>
	<body>
	<canvas id="canv" width="200" height="200" style="background-color:white;border:1px solid black;"></canvas>
	</body>
	</html>
	document.addEventListener("DOMContentLoaded", (eve)=>{
	const ctx = document.getElementById("canv").getContext("2d");

	// 中心座標の指定
	const cx = 100;
	const cy = 100;

	// 円の半径を指定
	const rIn = 50;
	const rOut = 80;

	// 四角形のサイズを指定
	const size = rIn * Math.sqrt(2);

	// 四角形の右上の座標を指定(中心から半分のサイズだけ左上の座標)
	const rx = cx - size/2;
	const ry = cy - size/2;

	// 今回作った関数でHSVスライダーをレンダリング
	ctx[drawHueCircle](cx, cy, rIn, rOut);
	ctx[drawSVRect](rx, ry, size, 0);

	// 適当に枠線を作る
	ctx.lineWidth = 1;
	ctx.strokeStyle = "#aaaaaa";

	// 円形スライダーの枠線
	ctx.beginPath();
	ctx.arc(cx, cy, rIn, Math[toRad](360), Math[toRad](0));
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(cx, cy, rOut, Math[toRad](360), Math[toRad](0));
	ctx.stroke();

	// 正方形スライダーの枠線
	ctx.beginPath();
	ctx.rect(rx, ry, size, size);
	ctx.stroke();
	}, false);
	const toRad = Symbol("toRad");
	const fromRad = Symbol("fromRad");
	Object.defineProperties(Math, {
	[toRad]: {
	value(num){ return num*Math.PI / 180; }
	},
	[fromRad]: {
	value(num){ return num*180 / Math.PI; }
	},
	});