123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
	<div class="row">
		<canvas id="mainCanvas" width="400" height="300"></canvas>
    <div id="side">
  		<div id="ctrl">
  			<ul>
					<span>Pattern</span>
  				<li><input type="checkbox" id="c1" name="chk"><label for="c1">src</label></li>
  				<li><input type="checkbox" id="c2" name="chk"><label for="c2">dst</label></li>
  			</ul>
  		</div>
      <div id="info">
				<p>●:src(新たな図形)</p>
        <p>●:dst(描画先 Canvas)</p>
        <p id="desc"></p>
      </div>
    </div>
	</div>
	<div class="row" id="selectBox"></div>
</div>
            
          
!
            
              * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#mainCanvas {
	margin: 0 20px 0 0;
	display: block;
	border: dashed 1px #ccc;
}

#side {
	width: 200px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	font-size: 12px;
}

#ctrl {
	margin: 0 0 20px 0;
	padding: 10px;
	border: dashed 1px #ccc;
}
#ctrl ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#ctrl li:nth-of-type(1) {
	margin: 4px 0;
}
#ctrl input[type='checkbox'] {
	margin: 0 4px 0 0;
	vertical-align: middle;
}
#ctrl label,
#ctrl input[type='checkbox'] {
  cursor: pointer;
}

#info {
	padding: 10px;
	border: dashed 1px #ccc;
	flex: 1;
}
#info p:nth-of-type(1) {
	margin: 0;
	color: red;
}
#info p:nth-of-type(2) {
	margin: 0;
	color: blue;
}
#desc {
	display: block;
	margin: 8px 0 0 0;
}

.row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.row:first-child {
	margin: 20px 0;
	-webkit-justify-content: center;
	justify-content: center;
}

#selectBox > canvas {
	background-color: rgb(255,255,255);
	margin: 2px;
}

.over:hover {
	cursor: pointer;
	transition: all .4s;
	transform: scale(1.15);
}

            
          
!
            
              function Gco(value, desc) {
  this.value = value;
  this.desc = desc;
}
var gcotbl = [
  new Gco("source-atop", "新たな図形は、その図形と描画先 Canvas の内容と重なり合う部分のみが描かれます。"),
  new Gco("source-in", "新たな図形は、その図形と描画先 Canvas の内容が重なり合う部分のみが描かれます。重なり合わない領域は透明になります。"),
  new Gco("source-out", "新たな図形は、その図形と描画先 Canvas の内容と重なり合わない部分のみが描画されます。他の領域は透明になります。"),
  new Gco("source-over",  "デフォルトの設定です。新たな図形をすでにあるCanvasの内容の上に描きます。"),			// default
  new Gco("destination-atop", "描画先 Canvas の内容は、新たな図形と重なり合う部分だけが残ります。新たな図形は、その背後に描かれます。"),
  new Gco("destination-in", "描画先 Canvas の内容は、新たな図形と重なり合う部分だけが残ります。新たな図形も含めて、他の領域は透明になります。"),
  new Gco("destination-out", "描画先 Canvas の内容は、新たな図形と重なり合わない部分だけが残ります。新たな図形も含めて、他の領域は透明になります。"),
  new Gco("destination-over", "新たな図形は、描画先 Canvas の内容の背後に描かれます。"),
  new Gco("lighter", "新たな図形と描画先 Canvas の内容が重なる部分は、カラー値が加算されます。"),
  new Gco("copy", "新たな図形だけが描かれて、描画先 Canvas の内容は透明になります。"),
  new Gco("xor", "新たな図形と描画先 Canvas の内容が重なり合う部分は透明になります。他の領域はともに描画されます。"),

  new Gco("multiply", "新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値が乗算されます。その結果、各ピクセルのカラーは暗くなります。"),
  new Gco("screen", "新たな図形のピクセルと対応する描画先 Canvas のピクセルとカラー値をそれぞれ一旦反転して、乗算したうえで、改めて反転します。その結果、各ピクセルのカラーは明るくなります (multiply の逆)。"),
  new Gco("overlay", "multiply と screen を組み合わせます。新たな図形のピクセルより対応する描画先 Canvas のピクセルが、それぞれ暗いときは暗くし、明るければ明るくします。"),
  new Gco("darken", "新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値を比べて、それぞれ暗い方のピクセルを残します。"),
  new Gco("lighten", "新たな図形のピクセルは、対応する描画先 Canvas のピクセルとカラー値を比べて、それぞれ明るい方のピクセルを残します。"),
  new Gco("color-dodge", "描画先 Canvas の内容のピクセルのカラー値を、対応する新たな図形の反転したピクセルのカラー値でそれぞれ除算します。"),
  new Gco("color-burn", "描画先 Canvas の内容のピクセルの反転したカラー値を、対応する新たな図形のピクセルのカラー値でそれぞれ除算し、改めて各ピクセルのカラー値を反転させます。"),
  new Gco("hard-light", "multiply と screen を組み合わせます。描画先 Canvas のピクセルより対応する新たな図形のピクセルが、それぞれ暗いときは暗くし、明るければ明るくします (overlay と比較対象が逆)。"),
  new Gco("soft-light", "hard-light の効果を柔らかくしたカラー合成になります。純粋な黒と白は、真っ黒や真っ白にはなりません。"),
  new Gco("difference", "新たな図形のピクセルと対応する描画先 Canvas のピクセルとカラー値の差の絶対値をそれぞれのピクセルに定めます。"),
  new Gco("exclusion", "difference よりもコントラストを弱めたカラー合成になります(いわゆる「除外」)。"),
  new Gco("hue", "描画先 Canvas の内容のピクセルの輝度と彩度は保ち、対応する新たな図形のピクセルの色相をそれぞれ与えます。"),
  new Gco("saturation", "描画先 Canvas の内容のピクセルの輝度と色相は保ち、対応する新たな図形のピクセルの彩度をそれぞれ与えます。"),
  new Gco("color", "描画先 Canvas の内容のピクセルの輝度は保ち、対応する新たな図形のピクセルの色相と彩度をそれぞれ与えます。"),
  new Gco("luminosity", "描画先 Canvas の内容のピクセルの色相と彩度は保ち、対応する新たな図形のピクセルの輝度をそれぞれ与えます。")
];

var startFlg = false;
var srcPtnFlg = false;
var dstPtnFlg = false;
var selectIdx = -1;

window.onload = function() {
	window.elems = {
		canvas: document.getElementById("mainCanvas"),
		selbox: [],
    desc: document.getElementById("desc")
	}
	var len = gcotbl.length;
	var frag = document.createDocumentFragment();
	var src = {cx: 40, cy: 40, r: 30};
	var dst = {cx: 60, cy: 60, r: 30};

	for (var i=0; i<len; i++) {
		var canvas = document.createElement("canvas");
		canvas.width = 100;
		canvas.height = 100 + 20;
		canvas.dataset.gcoidx = i;
		canvas.classList.add("over");
		elems.selbox[i] = canvas;

		var ctx = canvas.getContext("2d");

		// draw canvas
		draw2circle(ctx, gcotbl[i].value, src, dst);

		// composite title
		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.fillRect(0, 100, 100, 20);
    ctx.strokeStyle="#ccc";
    ctx.strokeRect(0, 0, 100, 120);

		ctx.fillStyle = "white";
		ctx.textAlign = "center";
		ctx.textBaseline = "middle";
		ctx.font = "12px sans-serif";
		ctx.fillText(gcotbl[i].value, 50, 110);

		// Event Listener
		canvas.addEventListener('click', function(e) {
			if (startFlg === false) {
				startFlg = true;
				elems.selbox.forEach(function(elem) {
					elem.classList.remove("over");
				});
        selectIdx = parseInt(this.dataset.gcoidx, 10);
        elems.desc.textContent = gcotbl[selectIdx].desc;
				startAnim(selectIdx);
			}
		});

    canvas.addEventListener('mouseenter', function(e) {
//      console.log("enter: " + this.dataset.gcoidx);
      selectIdx = parseInt(this.dataset.gcoidx, 10);
      if (startFlg === false) {
        elems.desc.textContent = gcotbl[selectIdx].desc;
      }
		});
    canvas.addEventListener('mouseleave', function(e) {
//      console.log("leave: " + this.dataset.gcoidx);
      selectIdx = -1;
      if (startFlg === false) {
        elems.desc.textContent = "";
      }
		});

		frag.appendChild(canvas);
	}
	document.getElementById("selectBox").appendChild(frag);

  // Event Listener
  var chks = document.getElementsByName("chk");
  var a = [1,2,3];
  [].forEach.call(chks, function(chk) {
    chk.addEventListener('change', function(e) {
      switch (this.id) {
        case "c1":
          srcPtnFlg = this.checked;
          break;
        case "c2":
          dstPtnFlg = this.checked;
          break;
      }
    });
  });

};	// onload

function startAnim(idx) {
	var width = elems.canvas.width;
	var height = elems.canvas.height;
	var src = {cx: -100, cy: 100, r: 100};
	var dst = {cx: width + 100, cy: 200, r: 100};
	var collisionWidth = Math.sqrt(3) * src.r;

	(function drawAnim() {
		var ctx = elems.canvas.getContext("2d");
		ctx.clearRect(0, 0, width, height);

		// draw canvas
		draw2circle(ctx, gcotbl[idx].value, src, dst);

		// judge
		if (src.cx - src.r < width) {
			src.cx++;
			dst.cx--;
			if (Math.abs(src.cx - dst.cx) < collisionWidth) {
				var tm = 10;
			} else {
				var tm = 1;
			}
			setTimeout(drawAnim, tm);
		} else {
			startFlg = false;
			ctx.clearRect(0, 0, width, height);
			elems.selbox.forEach(function(elem) {
				elem.classList.add("over");
			});
      if (selectIdx < 0) {
        elems.desc.textContent = "";
      } else {
        elems.desc.textContent = gcotbl[selectIdx].desc;
      }
		}
	})();
}

function draw2circle(ctx, gco, src, dst) {
  var color, grad;
  ctx.save();

	// destination
  ctx.beginPath();
  ctx.globalCompositeOperation = "source-over";
  if (dstPtnFlg) {
    var grad = ctx.createRadialGradient(dst.cx, dst.cy, 0, dst.cx, dst.cy, dst.r);
    grad.addColorStop(0.000, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(0, 0, 255)");
    grad.addColorStop(0.666, "rgb(0, 0, 255)");
    grad.addColorStop(0.666, "rgb(255, 255, 255)");
    grad.addColorStop(1.000, "rgb(255, 255, 255)");
    ctx.fillStyle = grad;
  } else {
    ctx.fillStyle = "rgb(0, 0, 255)";
  }
  ctx.arc(dst.cx, dst.cy, dst.r, 0, Math.PI*2, false);
  ctx.fill();

  // source
  ctx.beginPath();
  ctx.globalCompositeOperation = gco;
  if (srcPtnFlg) {
    var grad = ctx.createRadialGradient(src.cx, src.cy, 0, src.cx, src.cy, src.r);
    grad.addColorStop(0.000, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(0, 0, 0)");
    grad.addColorStop(0.333, "rgb(255, 0, 0)");
    grad.addColorStop(0.666, "rgb(255, 0, 0)");
    grad.addColorStop(0.666, "rgb(255, 255, 255)");
    grad.addColorStop(1.000, "rgb(255, 255, 255)");
    ctx.fillStyle = grad;
  } else {
    ctx.fillStyle = "rgb(255, 0, 0)";
  }
  ctx.arc(src.cx, src.cy, src.r, 0, Math.PI*2, false);
  ctx.fill();

	// destination outline
	ctx.beginPath();
  ctx.globalCompositeOperation = "source-over";
  ctx.strokeStyle = "#ddd";
	ctx.arc(dst.cx, dst.cy, dst.r, 0, Math.PI*2, false);
	ctx.stroke();

	// source outline
	ctx.beginPath();
	ctx.arc(src.cx, src.cy, src.r, 0, Math.PI*2, false);
	ctx.stroke();

  ctx.restore();
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console