Monday, June 11, 2012
Friday, June 8, 2012
Tuesday, June 5, 2012
Tuesday, May 29, 2012
Finished Project
http://media.comicvine.com/uploads/2/23721/558157-ion_super.jpg
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////
var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, "repeat");
context.rect(0, 0, canvas.width , canvas.height);
context.fillStyle = pattern;
context.fill();
///////
var startX= 200;
var startY= 100;
var start2X= 200;
var start2Y= 800;
context.beginPath();
context.rect(startX, startY, 600, 100);
var grd = context.createLinearGradient(0, 200, 0, 100);
// green
grd.addColorStop(0, "green");
// black
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fill();
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.rect(start2X, start2Y, 600, 100);
var grd = context.createLinearGradient(0, 800, 0,900);
// light blue
grd.addColorStop(0, "green");
// dark blue
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fill();
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 300;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "green";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "green";
context.stroke();
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = pattern;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
var x = 400;
var y = 325;
var width = 200;
var height = 350;
var imageObjgl = new Image();
imageObjgl.onload = function() {
context.drawImage(imageObjgl,x,y, width, height);
};
imageObjgl.src = "http://media.comicvine.com/uploads/2/23721/558157-ion_super.jpg";
};
imageObj.src = "http://www.rocketroberts.com/astro/images/dx-18p.jpg";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)