<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-left:200px;">
<canvas id="display" height="600" width="600" style="background-color: bisque;"></canvas>
<script>
class Track {
constructor(){
this.content = []
}
getTrack(){
return this.content
}
clearTrack(){
this.content = []
}
pushItem(item){
this.content.push(item)
}
getNewestItem(){
return this.content.length!==0?this.content[this.content.length-1]:null
}
}
class Drawpaper {
constructor(){
this.el = document.createElement("canvas")
}
}
let cav = document.getElementById('display')
console.log(cav)
let context_2d = cav.getContext("2d");
let track = new Track
let defaultPenconf = {
size:9,
color:'black',
bgcolor:'black'
}
let canvasconf = {
height:600,
width:600,
bgcolor:'black'
}
setConfig (context_2d,defaultPenconf)
function setConfig (ctx,penconf) {
ctx.lineJoin="round";
ctx.lineCap="round";
ctx.strokeStyle=penconf.color;
ctx.fillStyle=penconf.bgcolor;
ctx.lineWidth=penconf.size;
}
function initListener (cav) {
cav.addEventListener('mousemove',penmove)
document.addEventListener('mouseup',penup)
cav.addEventListener('mouseleave',penleave)
}
function clearListener (cav) {
cav.removeEventListener('mousemove',penmove)
document.removeEventListener('mouseup',penup)
cav.removeEventListener('mouseleave',penleave)
}
function pendown (e) {
if(e.button!==0){
return
}
console.log(1)
let mousePosition = {x:e.offsetX,y:e.offsetY}
drawRound (context_2d,mousePosition)
track.pushItem(mousePosition)
initListener (cav)
}
function penmove(e) {
console.log(2)
let mousePosition = {x:e.offsetX,y:e.offsetY}
draw (context_2d,mousePosition)
track.pushItem (mousePosition)
}
function penup (e) {
console.log(3)
clearListener (cav)
track.clearTrack ()
}
cav.addEventListener('mousedown',pendown)
function penleave (e) {
let mousePosition = {x:e.offsetX,y:e.offsetY}
draw (context_2d,mousePosition)
clearListener (cav)
track.clearTrack ()
}
function drawRound (cavctx,position={}) {
let {x=0,y=0} = position
cavctx.beginPath();
let {size} = defaultPenconf
let r = size/2
cavctx.arc(x,y,r,0,2*Math.PI)
cavctx.closePath();
cavctx.fill();
}
function draw (cavctx,position={}) {
let {x=0,y=0} = position
let prevPosition = track.getNewestItem()
cavctx.beginPath();
cavctx.moveTo(prevPosition.x,prevPosition.y)
cavctx.lineTo(x,y);
cavctx.closePath();
cavctx.stroke();
}
</script>
</body>
</html>
Processed:
0.011, SQL:
8
