123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- const SMALLEST_SIZE = 4.0;
- const LARGEST_SIZE = 48.0;
- const DEFAULT_SIZE = 24.0;
- class State {
- updateWindowSize(w, h) {
- this.w = w;
- this.h = h;
- this.canvas.width = w;
- this.canvas.height = h;
- this.data = {};
- }
- constructor(canvas, ctx, w, h) {
- this.canvas = canvas;
- this.ctx = ctx;
- this.updateWindowSize(w, h);
- this.size = DEFAULT_SIZE;
- this.mode = 'square';
- }
- scroll(delta) {
- this.size += delta / 30.0;
- if (this.size < SMALLEST_SIZE) {
- this.size = SMALLEST_SIZE;
- } else if (this.size > LARGEST_SIZE) {
- this.size = LARGEST_SIZE;
- }
- }
- draw(mouseLoc) {
- this.ctx.clearRect(0, 0, this.w, this.h);
- if (mouseLoc !== null) {
- let [fx, fy] = mouseLoc;
- this.ctx.fillStyle = '#f00';
- if (this.mode === 'square') {
- fx = Math.floor(fx / this.size);
- fy = Math.floor(fy / this.size);
- this.ctx.fillRect(fx * this.size, fy * this.size, this.size, this.size);
- } else {
- this.ctx.strokeStyle = '#f00';
- const half = this.size / 2
- fx = Math.floor((fx + half) / this.size);
- fy = Math.floor((fy + half) / this.size);
- this.ctx.moveTo(fx * this.size, fy * this.size);
- this.ctx.arc(fx * this.size, fy * this.size, 5, 0, Math.PI * 2, true);
- this.ctx.stroke();
- }
- }
- this.ctx.strokeStyle = '#000';
- for (let x = 0; Math.floor(x / this.size < this.w); x++) {
- this.ctx.beginPath();
- this.ctx.moveTo(x * this.size, 0);
- this.ctx.lineTo(x * this.size, this.h);
- this.ctx.stroke();
- }
- for (let y = 0; Math.floor(y / this.size < this.h); y++) {
- this.ctx.beginPath();
- this.ctx.moveTo(0, y * this.size);
- this.ctx.lineTo(this.w, y * this.size);
- this.ctx.stroke();
- }
- }
- }
- let main = () => {
- const canvas = document.getElementById('cv');
- const w = window.innerWidth;
- const h = window.innerHeight;
- const ctx = canvas.getContext('2d');
- let state = new State(canvas, ctx, w, h);
- let last_mouse = null;
- state.draw(last_mouse);
- document.addEventListener('mousemove', e => {
- last_mouse = [e.clientX, e.clientY];
- state.draw(last_mouse);
- });
- document.addEventListener('wheel', e => {
- state.scroll(-e.deltaY);
- state.draw(last_mouse);
- });
- window.addEventListener('resize', () => {
- state.updateWindowSize(
- window.innerWidth,
- window.innerHeight,
- );
- state.draw(last_mouse);
- });
- document.addEventListener('keydown', e => {
- if (e.key === ' ') {
- if (state.mode === 'square')
- state.mode = 'dot';
- else
- state.mode = 'square';
- }
- state.draw(last_mouse);
- });
- };
- window.onload = main;
|