1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
import Canvas from './Canvas.js';
const $ = id => document.getElementById(id)
window.onload = () => {
const canvas = new Canvas('root');
const pos = canvas.mouse.drawingPos;
canvas.onMouseMove = () => canvas.draw();
canvas.onDraw = ct => {
ct.fillStyle = '#f00';
ct.fillRect(0, 0, 1/3, 1/3);
ct.fillStyle = '#0f0';
ct.fillRect(2/3, 0, 1/3, 1/3);
ct.fillStyle = '#ff0';
ct.fillRect(0, 2/3, 1/3, 1/3);
ct.fillStyle = '#00f';
ct.fillRect(2/3, 2/3, 1/3, 1/3);
ct.strokeStyle = '#fff';
ct.lineWidth = canvas.pixelsToUnits(1);
ct.beginPath();
ct.arc(pos.x, pos.y, canvas.pixelsToUnits(30), 0, 2*Math.PI);
ct.closePath();
ct.stroke();
};
canvas.draw();
}
|
