e-tipsmemo

ごった煮

ElectronでJCanvasを使う

プログラム

Javascriptがよくわからなかったので導入がよくわからなかった。


electronのアプリの場所でローカルインストールする

npm install --save-dev jquery
npm install --save-dev jcanvas
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
	<link href="./style.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script>
      require('./renderer.js')
    </script>
    <canvas id="pallet" width="300" height="300"></canvas>
  </body>
</html>
renderer.js
window.jQuery = window.$ = require('jquery');
var JCanvas = require('jcanvas');
JCanvas($, window);


$(function(){

	$('#pallet').drawPolygon({
		layer: true,
		fillStyle: '#c33',
		x: 200, y: 200,
		radius: 50,
		sides: 5,
		concavity: 0.5,
		click: function(layer) {
		// Spin star
		$(this).animateLayer(layer, {
		rotate: '+=144'
		});
		}
	});	

});

f:id:katakanan:20171029101251p:plain

CSS内だけでcanvasのサイズを指定すると、表示がおかしくなる。

f:id:katakanan:20171029101318p:plain

その場合は、index.htmlに直接書くか、
jsに以下を追加する。

$('#pallet')[0].width=300;
$('#pallet')[0].height=300;