Arquivo da tag: Canvas

Javascript – Animating with Canvas

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      angle = 0;
//       xpos = 0;
 
 
  setInterval(function() {
    requestAnimationFrame(draw);
  }, 1000 / 40);
 
 
  function draw() {
    context.clearRect(0, 0, 600, 600);
    context.save();
    context.translate(300, 300);
    var scale = Math.sin(angle) + 1;
    context.scale(scale, scale);
    context.rotate(angle);
    context.fillRect(-50, -50, 100, 100);
    angle += 0.1;
    context.restore();
//     context.beginPath();
//     context.arc(xpos, 300, 20, 0, Math.PI * 2);
//     context.fill();
//     xpos++;
  }
};

Javascript – Listening for Mouse and Keyboard Events with HTML Canvas

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      x = 100,
      y = 100;
 
  document.body.addEventListener("keydown", function(event) {
    switch(event.keyCode) {
      case 37: // left
        x--;
        draw();
        break;
 
      case 39: // right
        x++;
        draw();
        break;
    }
  });
 
  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(x, y, 20, 0, Math.PI * 2);
    context.fill();
  }
 
  draw();
 
 
 
 
//       rect = canvas.getBoundingClientRect(),
//       mouseX,
//       mouseY;
//       btn = {
//         x: 100,
//         y: 100,
//         w: 100,
//         h: 50,
//         selected: false
//       };
 
//   drawButton();
 
//   canvas.addEventListener("click", function(event) {
//     var rect = canvas.getBoundingClientRect(),
//         x = event.clientX - rect.left,
//         y = event.clientY - rect.top;
//     if(x >= btn.x && x <= btn.x + btn.w &&
//       y >= btn.y && y <= btn.y + btn.h) {
//       btn.selected = !btn.selected;
//       drawButton();
//     }
//   });
 
//   canvas.addEventListener("mousemove", function(event) {
//     var rect = canvas.getBoundingClientRect(),
//         x = event.clientX - rect.left,
//         y = event.clientY - rect.top;
//     if(x >= btn.x && x <= btn.x + btn.w &&
//       y >= btn.y && y <= btn.y + btn.h) {
//       canvas.style.cursor = "pointer";
//     }
//     else {
//       canvas.style.cursor = "auto";
//     }
//   });
 
 
//   function drawButton() {
//     context.fillStyle = btn.selected ? "red" : "gray";
//     context.fillRect(btn.x, btn.y, btn.w, btn.h);
//   }
 
 
 
 
//   canvas.addEventListener("mousedown", onMouseDown);
 
//   function onMouseDown(event) {
//     mouseX = event.clientX - rect.left;
//     mouseY = event.clientY - rect.top;
//     canvas.addEventListener("mousemove", onMouseMove);
//     document.body.addEventListener("mouseup", onMouseUp);
//   }
 
//   function onMouseMove(event) {
//     context.beginPath();
//     context.moveTo(mouseX, mouseY);
//     mouseX = event.clientX - rect.left;
//     mouseY = event.clientY - rect.top;
//     context.lineTo(mouseX, mouseY);
//     context.stroke();
//   }
 
//   function onMouseUp(event) {
//     canvas.removeEventListener("mousemove", onMouseMove);
//     document.body.removeEventListener("mouseup", onMouseUp);
//   }
 
};

Javascript – Canvas and Pixels

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");
 
  context.fillRect(0, 0, 600, 600);
 
  for(var i = 0; i < 1000; i++) {
    var x = Math.round(Math.random() * 600),
        y = Math.round(Math.random() * 600);
    setPixel(context, x, y, 255, 255, 0, 255);
  }
 
  function setPixel(context, x, y, r, g, b, a) {
    var imageData = context.createImageData(1, 1);
    imageData.data[0] = r;
    imageData.data[1] = g;
    imageData.data[2] = b;
    imageData.data[3] = a;
 
    context.putImageData(imageData, x, y);
  }
 
 
//   context.fillStyle = "purple";
//   context.fillRect(0, 0, 600, 600);
 
//   var pixel = getPixel(context, 100, 100);
 
//   console.log("red: " + pixel.r);
//   console.log("green: " + pixel.g);
//   console.log("blue: " + pixel.b);
//   console.log("alpha: " + pixel.a);
 
 
 
//   function getPixel(context, x, y) {
//     var imageData = context.getImageData(x, y, 1, 1);
//     return {
//       r: imageData.data[0],
//       g: imageData.data[1],
//       b: imageData.data[2],
//       a: imageData.data[3]
//     };
//   }
 
 
 
 
  //   var imageData = context.getImageData(0, 0, 600, 600);
//   for(var x = 100; x < 200; x++) {
//     for(var y = 100; y < 200; y++) {
//       var index = (y * imageData.width + x) * 4;
//       imageData.data[index] = 255;
//       imageData.data[index + 3] = 255;
//     }
//   }
//   context.fillRect(0, 0, 600, 600);
//   context.putImageData(imageData, 0, 0, 100, 100, 100, 100);
 
//   context.fillStyle = "yellow";
//   context.fillRect(0, 0, 600, 600);
 
//   var imageData = context.getImageData(0, 0, 600, 600),
//       x = 100,
//       y = 150,
//       index = (y * imageData.width + x) * 4;
 
//   console.log("red: " + imageData.data[index]);
//   console.log("green: " + imageData.data[index + 1]);
//   console.log("blue: " + imageData.data[index + 2]);
//   console.log("alpha: " + imageData.data[index + 3]);
};

Javascript – Canvas Transformations

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");
 
 
  var num = 30;
  context.translate(300, 300);
  for(var i = 0; i < num; i++) {
    context.rotate(Math.PI * 2 / num);
    context.beginPath();
    context.arc(100, 0, 10, 0, Math.PI * 2);
    context.fill();
  }
 
 
//   context.translate(300, 300);
//   context.scale(1, -1);
//   context.beginPath();
//   context.moveTo(-300, 0);
//   context.lineTo(300, 0);
//   context.moveTo(0, -300);
//   context.lineTo(0, 300);
//   context.stroke();
 
//   context.beginPath();
//   context.arc(100, 100, 10, 0, Math.PI * 2);
//   context.fill();
 
//   context.font = "30px Arial";
//   context.fillText("Text", 120, 120);
 
 
//   context.translate(300, 0);
//   context.rotate(Math.PI / 4);
//   context.fillRect(0, 0, 100, 100);
 
 
//   context.save();
//   context.scale(2, 0.5);
//   for(var j = 0; j < 10; j++) {
//     context.save();
//     for(var i = 0; i < 10; i++) {
//       context.fillRect(0, 0, 30, 30);
//       context.translate(40, 0);
//     }
//     context.restore();
//     context.translate(0, 40);
//   }
//   context.restore();
//   context.fillStyle = "red";
//   context.fillRect(0, 0, 100, 100);
 
//   context.translate(100, 100);
//   context.fillRect(0, 0, 100, 100);
};

Javascript – Canvas Effects

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");
 
  context.shadowColor = "rgba(0, 0, 0, 0.5)";
 
  document.body.addEventListener("mousemove", function(event) {
    context.clearRect(0, 0, 600, 600);
    var dx = 300 - event.clientX,
        dy = 300 - event.clientY,
        distance = Math.sqrt(dx * dx + dy * dy);
 
    context.shadowOffsetX = dx * 0.5;
    context.shadowOffsetY = dy * 0.5;
    context.shadowBlur = distance * 0.25;
    context.fillStyle = "red";
    context.fillRect(250, 250, 100, 100);
  });
 
//   context.shadowBlur = 10;
//   context.shadowOffsetX = 10;
//   context.shadowOffsetY = 10;
 
//   context.fillStyle = "red";
//   context.fillRect(50, 200, 400, 100);
 
//   context.globalCompositeOperation = "darken";
 
//   context.fillStyle = "blue";
//   context.fillRect(200, 50, 100, 400);
};

Javascript – HTML Canvas and Images

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Canvas Graphics and Animation</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      image = document.createElement("img"),
      x = 0,
      y = 0;
 
  image.src = "http://bit-101.com/horse.jpg";
  image.addEventListener("load", function() {
    setInterval(animate, 1000/15);
  });
 
 
  function animate() {
    var w = 186,
        h = 135;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 
                      w * x, h * y, w, h, 
                      0, 0, w, h);
    x++;
    if(x > 3) {
      x = 0;
      y++;
    }
    if(y > 3) {
      y = 0;
    }
  }
};

HTML5 – Get Started with LeafletJS Mapping

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Leaflet Demo</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
 
</head>
<body>
 
<div id="map" style="width: 100%; height: 630px;"></div>
 
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
</body>
</html>

Javascript

  var map = L.map('map').setView([38.7964062, -95.4801544], 4);
  var osm = '//{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png';
 
  L.tileLayer(osm, {
    minZoom: 3,
    maxZoom: 10
  }).addTo(map);

HTML5 – Gradient Fills on the HTML5 Canvas

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      width = canvas.width = 600,
      height = canvas.height = 600;
 
  // radial
  var gradient = context.createRadialGradient(120, 80, 0, 110, 90, 70);
  gradient.addColorStop(0, "white");
  gradient.addColorStop(1, "black");
  context.fillStyle = gradient;
  context.beginPath();
  context.arc(100, 100, 50, 0, Math.PI * 2);
  context.fill();
 
 
  // linear
  /*
  var linearGradient = context.createLinearGradient(100, 100, 200, 200);
  linearGradient.addColorStop(0, "red");
  linearGradient.addColorStop(0.5, "green");
  linearGradient.addColorStop(1, "blue");
 
  context.fillStyle = linearGradient;
  context.fillRect(100, 100, 100, 100);
  */
};

HTML5 – Drawing Styles on HTML5 Canvas

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      width = canvas.width = 600,
      height = canvas.height = 600;
 
  context.lineCap = "round";
  context.lineJoin = "miter";
  context.miterLimit = 1;
 
  context.lineWidth = 20;
  context.strokeStyle = "#999999";
  draw();
 
  context.lineWidth = 1;
  context.strokeStyle = "#ff0000";
  draw();
 
  function draw() {
    context.beginPath();
    context.moveTo(50, 50);
    context.lineTo(150, 50);
    context.stroke();
 
    context.beginPath();
    context.rect(200, 200, 100, 100);
    context.stroke();
 
    context.beginPath();
    context.moveTo(390, 500);
    context.lineTo(400, 400);
    context.lineTo(410, 500);
    context.stroke();
  }
};

HTML5 – Drawing Paths – Curves and Arcs

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Canvas Graphics and Animation</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

Javascript

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");
 
  var p0 = {
      x: Math.random() * 600,
      y: Math.random() * 600
    },
      p1 = {
      x: Math.random() * 600,
      y: Math.random() * 600
    },
      p2 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    },
      p3 = {
        x: Math.random() * 600,
        y: Math.random() * 600
    };
 
  context.beginPath();
  context.moveTo(p0.x, p0.y);
//   context.quadraticCurveTo(p1.x, p1.y, p2.x, p2.y);
  context.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
  context.stroke();
 
  drawPoint(p0);
  drawPoint(p1);
  drawPoint(p2);
  drawPoint(p3);
 
  function drawPoint(p) {
    context.fillRect(p.x - 4, p.y - 4, 8, 8);
  }
 
 
  // arc
  /*
  context.beginPath();
  context.arc(300, 300, 100, 0, 2, true);
  context.stroke();
  */
};