Use mouse to move umbrella around the screen.
A Pen by Liliana Kastilio on CodePen.
<body> | |
<canvas id="myCanvas"></canvas> | |
</body> |
Use mouse to move umbrella around the screen.
A Pen by Liliana Kastilio on CodePen.
var canvas = document.getElementById('myCanvas'); | |
var isMouseDown = false; | |
var isMouseMove = false; | |
var message = ""; | |
var mousePos = { | |
x:0, | |
y:0 | |
}; | |
if(canvas.getContext && canvas.getContext('2d')) { | |
context = canvas.getContext('2d'); //context | |
canvas.width = window.innerWidth; | |
canvas.height = window.innerHeight; | |
canvas.style.position = 'absolute'; | |
canvas.style.top = 0; | |
canvas.style.bottom = 0; | |
canvas.style.left = 0; | |
canvas.style.right = 0; | |
canvas.style.zIndex = -1; | |
var umbrella = { | |
top: { | |
x: 300, | |
y: 200, | |
r: 75, | |
sAngle: Math.PI, | |
eAngle: 0 | |
}, | |
handle: { | |
width: 2, | |
height: 90 | |
} | |
} | |
canvas.addEventListener('mousemove', function(evt) { | |
mousePos = getMousePos(canvas, evt); | |
message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; | |
writeMessage(canvas, message); | |
isMouseMove = true; | |
}, false); | |
canvas.addEventListener('mousedown', function(evt) { | |
isMouseDown = true; | |
mousePos = getMousePos(canvas, evt); | |
message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; | |
writeMessage(canvas, message); | |
}, false); | |
canvas.addEventListener('mouseup', function(evt) { | |
isMouseDown = false; | |
}, false); | |
} | |
function draw_umbrella() { | |
//umbrella top | |
context.beginPath(); | |
context.arc(umbrella.top.x, umbrella.top.y, umbrella.top.r, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
context.strokeStyle ="#f6f6f6"; | |
context.lineWidth = umbrella.handle.width; | |
context.stroke(); | |
//context.fillStyle="#f6f6f6"; | |
//context.fill(); | |
context.closePath(); | |
//wavy bottom of umbrella | |
context.beginPath(); | |
context.lineWidth = umbrella.handle.width; | |
context.arc(umbrella.top.x - 5*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
context.arc(umbrella.top.x - 3*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
context.arc(umbrella.top.x - umbrella.top.r/6, umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
context.arc(umbrella.top.x + umbrella.top.r/6, umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
context.arc(umbrella.top.x + 3*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
context.arc(umbrella.top.x + 5*(umbrella.top.r/6), umbrella.top.y, umbrella.top.r/6, umbrella.top.sAngle, umbrella.top.eAngle, false); | |
context.strokeStyle ="#f6f6f6"; | |
context.lineWidth = umbrella.handle.width; | |
context.stroke(); | |
//context.fillStyle="#e74c3c"; | |
//context.fill(); | |
context.closePath(); | |
//umbrella handle | |
context.beginPath(); | |
context.arc(umbrella.top.x - umbrella.top.r/6, umbrella.top.y + umbrella.handle.height, umbrella.top.r/6, umbrella.top.eAngle, umbrella.top.sAngle, false); | |
context.moveTo(umbrella.top.x, umbrella.top.y); | |
context.lineTo(umbrella.top.x, umbrella.top.y + umbrella.handle.height); | |
context.strokeStyle ="#f6f6f6"; | |
context.lineWidth = umbrella.handle.width; | |
context.stroke(); | |
context.closePath(); | |
} | |
function writeMessage(canvas, message) { | |
context.clearRect(0, 0, 100, 40); | |
context.font = '18pt Calibri'; | |
context.fillStyle = 'black'; | |
context.fillText(message, 10, 25); | |
} | |
function getMousePos(canvas, evt) { | |
var rect = canvas.getBoundingClientRect(); | |
return { | |
x: evt.clientX - rect.left, | |
y: evt.clientY - rect.top | |
}; | |
} | |
function reset() { | |
canvas.width = canvas.width; | |
} | |
function update() { | |
writeMessage(canvas, message); | |
draw_umbrella(); | |
if(Math.pow((mousePos.x - umbrella.top.x),2) + Math.pow(mousePos.y - umbrella.top.y, 2) < Math.pow(umbrella.top.r,2) ) { | |
//console.log("INSIDE: " + Math.pow((mousePos.x - umbrella.top.x),2) + " " + Math.pow(mousePos.y - umbrella.top.y, 2) + " r^2: " + Math.pow(umbrella.top.r,2)); | |
//console.log("Mousedown: " + isMouseDown + " mousemove: " + isMouseMove); | |
if(isMouseDown & isMouseMove) { | |
//console.log("Mousedown: " + isMouseDown + " mousemove: " + isMouseMove); | |
umbrella.top.x = mousePos.x; | |
umbrella.top.y = mousePos.y; | |
}} | |
} | |
setInterval(function() { | |
reset(); | |
update(); | |
}, 16); | |
body { | |
width: 100%; | |
height: 100%; | |
margin: 0 auto; | |
background-color: #e74c3c; | |
} | |
canvas { | |
height: auto; | |
width:auto; | |
} |