Here’s a snippet of something I did tonight to play a bit with the Canvas and 2d Graphics context objects in javascript.<\/p>\n
[html]
\n<html>
\n <head>
\n <title>Playing with Canvas<\/title>
\n <\/head><\/p>\n
<body style="padding:0 0; margin: 0 0; background:black"><\/p>\n
<canvas id="myCanvas" width="1024" height="1024" ><\/canvas><\/p>\n
<script type="text\/javascript"><\/p>\n
\/\/convert to CSS friendly Hex String
\n function d2h (n) {
\n var result = n.toString(16);
\n if (n < 16) {
\n\tresult = ‘0’+result;
\n }
\n return result;
\n }<\/p>\n
var preparingBackground = true;
\n var canvas = document.getElementById("myCanvas");
\n var ctx = canvas.getContext("2d");<\/p>\n
var canvasWidth = parseInt(canvas.getAttribute("width"));
\n var canvasHeight = parseInt(canvas.getAttribute("height"));<\/p>\n
var r=255; var red;
\n var g=255; var green;
\n var b=255; var blue;<\/p>\n
var rectHeight = canvasHeight\/256;
\n var rectWidth = canvasWidth\/256;<\/p>\n
var rectX = 0;
\n var rectY = 0;<\/p>\n
var Rect = function(xval,yval,speedXval,speedYval,r,g,b) {
\n this.x = xval;
\n this.y = yval;<\/p>\n
this.speedX = speedXval;
\n this.speedY = speedYval;<\/p>\n
this.r = r;
\n this.g = g;
\n this.b = b;<\/p>\n
\/\/so colors dont jump from 255 to 0.
\n this.rDelta = 1;
\n this.gDelta = 1;
\n this.bDelta = 1;<\/p>\n
this.width = 1;
\n this.height = 1;<\/p>\n
\/\/so rectangle colors wont change so fast.
\n this.colorChangeDefaultValue=1;
\n this.colorChangeAcumulator=1;<\/p>\n
this.move = function () {
\n\tthis.x = this.x+this.speedX;
\n this.y = this.y+this.speedY;<\/p>\n
\t\/\/if you reach a borders change direction.
\n if ((this.x+this.width >= canvasWidth && this.speedX > 0) ||
\n\t (this.x <= 0 && this.speedX < 0)) {
\n\t this.speedX = this.speedX*-1;
\n\t}<\/p>\n
if ((this.y+this.height >= canvasHeight && this.speedY > 0) ||
\n\t (this.y <= 0 && this.speedY < 0)) {
\n\t this.speedY = this.speedY*-1;
\n\t}
\n }<\/p>\n
\/\/draw and change colors
\n this.draw = function () {
\n\t\/\/play with color gradients when you have a chance…
\n\tif (this.colorChangeAcumulator–==0) {
\n\t if ((this.r >= 255 && this.rDelta > 0) ||
\n (this.r <= 0 && this.rDelta < 0)) {
\n\t this.rDelta=this.rDelta*-1;
\n\t }<\/p>\n
\t if ((this.g >= 255 && this.gDelta > 0) ||
\n (this.g <= 0 && this.gDelta < 0)) {
\n\t this.gDelta=this.gDelta*-1;
\n\t }<\/p>\n
\t if ((this.b >= 255 && this.bDelta > 0) ||
\n (this.b <= 0 && this.bDelta < 0)) {
\n\t this.bDelta=this.bDelta*-1;
\n\t }<\/p>\n
\t this.r=(this.r+this.rDelta) % 256;
\n\t this.g=(this.g+this.gDelta) % 256;
\n\t this.b=(this.b+this.bDelta) % 256; <\/p>\n
\t this.colorChangeAcumulator=this.colorChangeDefaultValue;
\n\t this.width++;
\n\t this.height++;
\n\t}<\/p>\n
\t\/\/paint the reactangle
\n\tctx.fillStyle="#"+d2h(this.r)+d2h(this.g)+d2h(this.b);
\n\tctx.fillRect(this.x,this.y,this.width,this.height);
\n }
\n }<\/p>\n
\/\/animation interval ids
\n var prepareBackgroundIntervalId = 0;
\n var rectsIntervalId = 0;<\/p>\n
var speedX = 7;
\n var speedY = 7;<\/p>\n
var theRects = [new Rect(0,0,speedX,speedY,10,44,100),
\n\t\t new Rect(canvasWidth,canvasHeight,-speedX,-speedY,125,0,0),
\n\t\t new Rect(canvasWidth,0,-speedX,speedY,0,210,80),
\n\t\t new Rect(0,canvasHeight,speedX,-speedY,40,40,0),
\n\t\t new Rect(canvasWidth\/2,0,0,speedY,-4,40,40),
\n\t\t new Rect(canvasWidth\/2,canvasHeight,4,-speedY,0,100,250),
\n\t\t new Rect(0,canvasHeight\/2,speedX,0,210,100,100),
\n\t\t new Rect(canvasWidth,512,-speedX,0,100,10,0)];<\/p>\n
function prepareBackground() {<\/p>\n
if (preparingBackground) {
\n\tr=r-1;
\n\tg=g-1;
\n\tb=b-1;<\/p>\n
\tred = d2h(r);
\n\tgreen = d2h(g);
\n\tblue = d2h(b);<\/p>\n
\tctx.fillStyle = "#"+red+green+blue;
\n\tctx.fillRect(rectX,rectY,canvas.getAttribute("width"),rectHeight);<\/p>\n
\trectY = rectY + rectHeight;<\/p>\n
\tpreparingBackground = !(r==0 && g==0 && b==0);
\n } else {
\n\tclearInterval(prepareBackgroundIntervalId);
\n\trectsIntervalId = setInterval("moveRects()",33);
\n }
\n }<\/p>\n
function moveRects() {
\n for (i in theRects) {
\n\tvar rect = theRects[i];
\n\trect.draw();
\n\trect.move();
\n }
\n }<\/p>\n
prepareBackgroundIntervalId = setInterval("prepareBackground()",1);<\/p>\n
<\/script>
\n <\/body><\/p>\n
<\/html>
\n[\/html]<\/p>\n","protected":false},"excerpt":{"rendered":"
Here’s a snippet of something I did tonight to play a bit with the Canvas and 2d Graphics context objects in javascript. [html] <html> <head> <title>Playing with Canvas<\/title> <\/head> <body style="padding:0 0; margin: 0 0; background:black"> <canvas id="myCanvas" width="1024" height="1024" ><\/canvas> <script type="text\/javascript"> \/\/convert to CSS friendly Hex String function d2h (n) { var result […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[30],"tags":[],"class_list":["post-2121","post","type-post","status-publish","format-standard","hentry","category-geeklife"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5Unzf-yd","jetpack-related-posts":[{"id":2632,"url":"https:\/\/www.gubatron.com\/blog\/javascript-get-n-random-elements-from-a-list\/","url_meta":{"origin":2121,"position":0},"title":"javascript: Get N random elements from a List","author":"gubatron","date":"January 5, 2012","format":false,"excerpt":"[javascript] \/** * Walks linearly through the list to find an element. * returns true if it's found. *\/ function elementIn(collection, element) { for (var i=0; i < collection.length; i++) { if (collection[i]==element) { return true; } } return false; } \/** * Returns a new list of n random\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2671,"url":"https:\/\/www.gubatron.com\/blog\/how-to-shuffle-a-listarray-in-javascript\/","url_meta":{"origin":2121,"position":1},"title":"How to shuffle a List (or Array) in Javascript","author":"gubatron","date":"February 24, 2012","format":false,"excerpt":"[javascript] \/** * Returns number starting from offset up to n-1 *\/ function getRandomWithOffset(n,offset) { return Math.floor(Math.random()*n+offset); } \/** * Returns random integer from 0 to n-1 *\/ function getRandom(n) { return getRandomWithOffset(n,0); } \/** Fisher\u2013Yates shuffle algorithm O(n) *\/ function shuffleList(list) { for (var i=list.length-1; i>0; i--) { var\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2749,"url":"https:\/\/www.gubatron.com\/blog\/deploying-html5-apps-on-cloudfront-with-efficient-invalidation-requests\/","url_meta":{"origin":2121,"position":2},"title":"Deploying HTML5 apps on CloudFront with efficient invalidation requests","author":"gubatron","date":"June 8, 2012","format":false,"excerpt":"So you decided to build your next web app\/site using nothing but HTML5 and Javascript. No server side processing for anything related to UI. This means you will be coding a lot of JavaScript. Wouldn't it be nice to put all that static HTML and JS on your CloudFront CDN\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3,"url":"https:\/\/www.gubatron.com\/blog\/javascript-quicksort-implementation-with-dynamic-comparator\/","url_meta":{"origin":2121,"position":3},"title":"Javascript Quicksort implementation with dynamic comparator.","author":"gubatron","date":"February 29, 2012","format":false,"excerpt":"[javascript] Array.prototype.swap=function(a, b) { var tmp=this[a]; this[a]=this[b]; this[b]=tmp; } function quickSort(array,comparator) { qsort(array,0,array.length,comparator); } \/** * NOTE: the comparator is a dynamic function you will define like so comparator(a,b) { if (a > b) return 1; else if (a < b) return -1; else { return 0; } } *\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":402,"url":"https:\/\/www.gubatron.com\/blog\/an-useful-example-on-how-to-extend-javascript\/","url_meta":{"origin":2121,"position":4},"title":"An useful example on how to extend Javascript","author":"gubatron","date":"November 29, 2006","format":false,"excerpt":"Today I found out I could extend the functionality of __EXISTING__ html classes with javascript. I was manipulating DOM objects, better known as HTMLElement objects, and I needed a way to print the HTML that represents the tag of the object, not what's contained by the tags... a friend told\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":436,"url":"https:\/\/www.gubatron.com\/blog\/how-to-remove-elements-from-a-listbox-in-javascript-ie-and-firefox\/","url_meta":{"origin":2121,"position":5},"title":"How to remove elements from a listbox in Javascript (IE and Firefox)","author":"gubatron","date":"January 11, 2007","format":false,"excerpt":"\/\/By Gubatron, just a silly function to clear the contents of a listbox object var ua = navigator.userAgent.toLowerCase(); var Browser = new Object() Browser.isIE = window.ActiveXObject ? true : false; Browser.isFirefox = (ua.indexOf(\"firefox\")!=-1); function clearListbox(listboxObject) { if (Browser.isFirefox) { \/\/in firefox \"Option\" objects remove themselves. var options = listboxObject.options while\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/2121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=2121"}],"version-history":[{"count":0,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/2121\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=2121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=2121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=2121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}