Canvas - The Cure
•
0 j'aime•2,450 vues
An introduction to the HTML5 canvas element and what you can do with it. The key is using it all together in the demo at the end
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (19)
Similaire à Canvas - The Cure
Similaire à Canvas - The Cure (20)
Plus de Robert Nyman
Plus de Robert Nyman (20)
Dernier
Dernier (20)
Canvas - The Cure
- 1. The Cure
- 5. Canvas
- 6. Apple even creates open standards for the web -Steve Jobs
- 8. <canvas id="my-canvas" width="700" height="600"> I am canvas </canvas>
- 9. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 11. context.save(); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore();
- 13. context.fillRect(350, 50, 100, 100); context.lineWidth = "10"; context.lineJoin = "round"; context.moveTo(50, 50); context.lineTo(200, 200); context.lineTo(100, 300); context.closePath(); context.stroke(); context.fill();
- 15. context.beginPath(); context.strokeStyle = "#00f"; context.arc(200, 400, 75, 0, Math.PI*2, false); context.stroke();
- 17. context.fillStyle = "#f00"; context.bezierCurveTo(100, 100, 10, 10, 250, 30); context.fill();
- 19. var gradient = context.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, "#f00"); gradient.addColorStop(1, "#ffffa2"); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height);
- 21. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context.drawImage(img, 0, 0, 600, 200); }, false); img.setAttribute("src", "view.jpg");
- 22. var patternImg = document.createElement("img"); patternImg.onload = function () { context.strokeStyle = context.createPattern(this, "repeat"); context.stroke(); }; patternImg.src = "view-small.jpg";
- 25. context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 27. context.strokeStyle = "transparent"; context.arc(100, 100, 75, 0, Math.PI*2, false); context.clip(); context.stroke(); context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 30. context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.save(); context.translate(200, 200); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(0, 0, 100, 100); context.restore(); context.fillRect(0, 200, 100, 100);
- 33. context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.save(); context.translate(200, 200); context.scale(2, 2); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(0, 0, 100, 100); context.restore(); context.fillRect(0, 200, 100, 100);
- 36. context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.save(); context.translate(200, 200); context.rotate(0.23); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(0, 0, 100, 100); context.restore(); context.fillRect(0, 200, 100, 100);
- 39. context.fillStyle = "#000"; context.font = "16px Helvetica Neue"; context.fillText("I am text on canvas - how cool is that?", 200, 250);
- 40. context.fillStyle = "#000"; context.font = "16px Helvetica Neue"; context.shadowColor = "rgba(100, 100, 100, 0.5)"; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.fillText("I am text on canvas - how cool is that?", 200, 250);
- 43. // Image for loading var img = document.createElement("img"), img.addEventListener("load", function () { context.drawImage(img, 0, 0); }, false);
- 44. // To enable drag and drop canvas.addEventListener("dragover", function (evt) { evt.preventDefault(); }, false); // Handle dropped image file - only Firefox and Google Chrome canvas.addEventListener("drop", function (evt) { var files = evt.dataTransfer.files; if (files.length > 0) { var file = files[0]; if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { var reader = new FileReader(); // Note: addEventListener doesn't work in Google Chrome for this event reader.onload = function (evt) { img.src = evt.target.result; }; reader.readAsDataURL(file); } } evt.preventDefault(); }, false);
- 46. var mouseDown = false, brushColor = "rgb(0, 0, 0)"; // Detect mousedown canvas.addEventListener("mousedown", function (evt) { mouseDown = true; context.beginPath(); }, false); // Detect mouseup canvas.addEventListener("mouseup", function (evt) { mouseDown = false; var colors = context.getImageData(evt.layerX, evt.layerY, 1, 1).data; brushColor = "rgb(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ")"; }, false); // Draw, if mouse button is pressed canvas.addEventListener("mousemove", function (evt) { if (mouseDown) { context.strokeStyle = brushColor; context.lineWidth = 20; context.lineJoin = "round"; context.lineTo(evt.layerX+1, evt.layerY+1); context.stroke(); } }, false);
- 50. ???
- 51. The Cure - Demo
- 52. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 53. Robert Nyman http://robertnyman.com/ Twitter: @robertnyman Pictures: The Cure: http://www.amoeba.com/blog/2007/07/pen-is-mightier-than-the-sword/new-siouxsie-video-into-a-swan.html Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/ Sticky tape: http://damncoolpics.blogspot.com/2011/02/funny-graphs-and-charts.html Canvas: http://www.ioffer.com/c/Drawings-1000407 Wash machine: http://www.mymodernmet.com/profiles/blogs/a-father-who-creatively Clip: http://pics33.blogspot.com/2010/08/best-examples-of-creative-edit-images.html Lost in translation: http://www.impawards.com/2003/lost_in_translation_ver2.html Coffe machine: http://www.mymodernmet.com/profiles/blogs/a-father-who-creatively Throwing: http://pics33.blogspot.com/2010/08/best-examples-of-creative-edit-images.html Text: http://www.identifont.com/show?3OI Drag me: http://www.stardusttrailers.com/scheda_wallpaper.php?id=17261&titolo=Drag%20Me%20to%20Hell Drawing: http://www.mathacademy.com/pr/minitext/escher/big.asp?image=drawing_hands Protect painting: http://yellowpagescoupons.net/protect-painting-200-licensed-experienced-professional-detailed-prep-painters-sf-east-bay-area-ca-yellow-pages-coupons/ Calvin & Hobbes:http://www.fanpop.com/spots/calvin-and-hobbes/images/1395524/title/calvin-hobbes-hugging-wallpaper