Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Thanks to Jagadesha NH:
- // https://medium.com/@jagadeshanh/html5-canvas-click-and-draw-f665e02f5744
- var canvas = document.getElementsByTagName("canvas")[0];
- var context = canvas.getContext("2d");
- var height = canvas.height = window.innerHeight;
- var width = canvas.width = window.innerWidth;
- var mouseClicked = false, mouseReleased = true;
- var x0 = 50;
- y0 = 30;
- bredd =40;
- hojd = 40;
- distance = 40;
- color = "green";
- radie = 10;
- size = 22;
- document.addEventListener("click", onMouseClick, false);
- document.addEventListener("mousemove", onMouseMove, false);
- function onMouseClick(e) {
- mouseClicked = !mouseClicked;
- }
- function onMouseMove(e) {
- if (mouseClicked) {
- context.beginPath();
- context.arc(e.clientX, e.clientY, 7.5, 0, Math.PI * 2, false);
- context.lineWidth = 5;
- context.strokeStyle = color;
- context.stroke();
- }
- //en mouse over-funktion
- if ((e.clientX > x0) && (e.clientX < x0 + bredd) && (e.clientY > y0)
- && (e.clientY < y0 + hojd)) { color = "green"; }
- }
- // H�r b?rjar koden inspirerad av spelprogrammering.nu
- function myRectangle(x, y, w, l, color)
- {
- context.fillStyle = color
- context.fillRect(x, y, w, l);
- }
- function myText(x, y, size, text, color)
- {
- context.font = size + "pt Helvetica";
- context.fillStyle = color;
- context.fillText(text, x, y);
- }
- // rita de f?rgade rutorna
- this.myRectangle(x0, y0, bredd, hojd, "green");
- this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
- this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
- this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
- this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");
- // v?lj f?rg att rita med
- window.addEventListener('keydown',this.check,false);
- // function check(e) {
- // alert(e.keyCode);
- //}
- function check(e) {
- var code = e.keyCode
- // �ndra f�rg
- if (code == 71)
- color = "green";
- if (code == 66)
- color = "blue";
- if (code == 89)
- color = "yellow";
- if (code == 80)
- color = "pink";
- // �ndra radie
- if (code == 49)
- radie = 5;
- if (code == 50)
- radie = 10;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement