Skip to content

Instantly share code, notes, and snippets.

@gaogao-9

gaogao-9/CanvasRenderingContext2D.js

Created June 9, 2016 19:09
Show Gist options
  • Save gaogao-9/e5e084c35e313edfd12fcbd8251f7895 to your computer and use it in GitHub Desktop.
Save gaogao-9/e5e084c35e313edfd12fcbd8251f7895 to your computer and use it in GitHub Desktop.
Download ZIP
キャンバスのやつ
Raw
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();
}
},
});
Raw
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>
Raw
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);
Raw
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; }
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment