Thursday, December 15th, 2005
Killer effects with Canvas
<p>Romain Guy is a top guy at Sun, known for his awesome effects and look and feels in Java Swing.He had a look on the Ajax side recently though, when he took Canvas for a ride.
Take that rich UI frameworks! :)
Source Code
function drawCD() {
var g2 = document.getElementById("cdCover").getContext("2d");
g2.save();
g2.translate(0, cdCase.height * 2 - 1);
g2.scale(1, -1);
g2.beginPath();
g2.moveTo(0, cdCase.height / 2);
g2.lineTo(cdCase.width, cdCase.height / 2);
g2.lineTo(cdCase.width, cdCase.height + 1);
g2.lineTo(0, cdCase.height + 1);
g2.clip();
g2.drawImage(cover, 19, 3, 240, 227);
g2.drawImage(reflections, 0, 0);
g2.drawImage(stitch, 19, 3);
g2.drawImage(cdCase, 0, 0);
g2.globalCompositeOperation = "destination-out";
var alphaMask = g2.createLinearGradient(0, cdCase.height / 2, 0, cdCase.height);
alphaMask.addColorStop(0, "rgba(255, 255, 255, 1.0)");
alphaMask.addColorStop(1.0, "rgba(255, 255, 255, 0.5)");
g2.fillStyle = alphaMask;
g2.fillRect(0, cdCase.height / 2, cdCase.width, cdCase.height / 2);
g2.restore();
g2.drawImage(cover, 19, 3, 240, 227);
g2.drawImage(reflections, 0, 0);
g2.drawImage(stitch, 19, 3);
g2.drawImage(cdCase, 0, 0);
}
The Effect
Related Content:
5 rating from 3 votes
Not to diss Romain, but I think he’s a student who is/was an intern at Sun.
Not to diss Romain, but I think he’s a student who is/was an intern at Sun.
What the hell? what’s that supposed to mean?
Romain is a visual innovator. I’ve been following Romains work for a while now, and he’s nothing short of a legend when it comes to progromattic visual enhancements.
What’s the matter.
Intern or Not intern. Romain did and will do a great job.
We must appreciate his work for what he does, not who he is.
I think Ron was just pointing out that he is not a “top guy at Sun” as the article indicates.
That’s why the post begins “Not to diss Romain.”
Calm down.