Modelo de CANVAS
Arquivo da tag: Canvas
Javascript – Animating with Canvas
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
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
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
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
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
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
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
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
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();
}
};