Mark's Musings: HTML5 Canvas Tag Basic Example II

Per my previous post, working with the canvas tag in HTML5, here is some more code with gradients and an image.

Thanks again to Mark Pilgrim and his wonderful Dive into HTML5 site.

Enjoy:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Test Canvas II</title>

	<!-- get excanvas.js from http://code.google.com/p/explorercanvas/
	Note the test cases and examples. Very cool! -->
	<!--[if IE]>
	<script src="excanvas.js"></script>
	<![endif]-->

	</head>

	<body>

	<header>
	<hgroup>
	<h1>Testing Canvas Tag II</h1>
	</hgroup>
	</header>

	<section>
	<h3>Click on the rectangle to draw a gradient and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="a" width="300" height="225" style="border:1px dotted;" onclick="drawGradient('a', 0, 0, 300, 0);return false;" onmouseout="clearRectangle('a');return false;"></canvas>
	</section>

	<section>
	<h3>Click on the rectangle to draw a gradient top to bottom and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="b" width="300" height="225" style="border:1px dotted;" onclick="drawGradient('b', 0, 0, 0, 225);return false;" onmouseout="clearRectangle('b');return false;"></canvas>
	</section>

	<section>
	<h3>Click on the rectangle to draw a diagonal gradient and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="c" width="300" height="225" style="border:1px dotted;" onclick="drawGradient('c', 0, 0, 300, 225);return false;" onmouseout="clearRectangle('c');return false;"></canvas>
	</section>

	<section>
	<h3>Click on the rectangle to display a cat image and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="d" width="177" height="113" style="border:1px dotted;" onclick="drawCat();return false;" onmouseout="clearRectangle('d');return false;"></canvas>
	</section>

	<section>
	<h3>Click on the rectangle to display a "multi-cat" image and move the mouse out of the rectangle to clear it.</h3>
	<canvas id="e" width="550" height="387" style="border:1px dotted;" onclick="drawMultiCat();return false;" onmouseout="clearRectangle('e');return false;"></canvas>
	</section>

	<footer>
	<p>© 2010 <a href="http://www.markmcfadden.tel">Mark McFadden</a></p>
	</footer>

	</body>
	<script>

	function drawGradient(id, x0, y0, x1, y1)
	{
	//chained the method calls here
	var the_context = document.getElementById(id).getContext('2d');
	//createLinearGradient(x0, y0, x1, y1)
	var my_gradient = the_context.createLinearGradient(x0, y0, x1, y1);
	//define a gradient that shades from black to white
	my_gradient.addColorStop(0, "black");
	my_gradient.addColorStop(1, "white");
	//fill style is a gradient
	the_context.fillStyle = my_gradient;
	the_context.fillRect(0, 0, 300, 225);
	}

	function drawCat()
	{
	var context = document.getElementById("d").getContext("2d");
	//using an Image() object
	var cat = new Image();
	//the image
	cat.src = "cat.png";
	cat.onload = function() {
	//drawImage(image, dx, dy). Coordinates (0, 0) will draw the image at
	//the upper-left corner of the canvas
	context.drawImage(cat, 0, 0);
	};
	}

	function drawMultiCat()
	{
	var context = document.getElementById("e").getContext("2d");
	var cat = new Image();
	cat.src = "cat.png";
	cat.onload = function() {
	for (var x = 0, y = 0; x < 500 && y < 375; x += 50, y += 37) {
	//drawImage(image, dx, dy, dw, dh) used below takes an image, scales it to
	//a width of dw and a height of dh, and draws it on the canvas at
	//coordinates (dx, dy)
	context.drawImage(cat, x, y, 88, 56);
	}
	};
	}


	function clearRectangle (rec)
	{
	var the_canvas = document.getElementById(rec);
	the_canvas.width = the_canvas.width;
	}
	</script>
	</html>

view raw HTML5CanvasTagExample2.html hosted with ❤ by GitHub

Thursday, December 16, 2010

HTML5 Canvas Tag Basic Example II - Gradients and Images

No comments: