Tuesday, February 5, 2013
Heart Code
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//background variable
var rectxb = 0
var rectyb = 0
var rectwidthb = 800
var rectheightb = 600
//backgorund
context.beginPath();
context.rect(rectxb, rectyb, rectwidthb, rectheightb);
context.lineWidth = 5;
context.strokeStyle = 'rgb(59, 156, 156)';
context.fillStyle = 'rgb(59, 156, 156)';
context.fill();
context.stroke();
//rectangle
var rectx = 150
var recty = 125
var rectwidth = 400
var rectheight = 375
//gradient rect
var startx = 150;
var starty = 125;
var endx = 150;
var endy = 405;
//Rectangle
context.beginPath();
context.rect(rectx, recty, rectwidth, rectheight);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
var grd = context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(0,0,0)');
grd.addColorStop(.30,'rgb(255,255,255)');
grd.addColorStop(.60,'rgb(150,150,150)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle = grd;
context.fill();
context.stroke();
//Rectangle 2 Variables
var rectx2 = 200
var recty2 = 175
var rectwidth2 = 300
var rectheight2 = 275
//Rectangle 2
context.beginPath();
context.rect(rectx2, recty2, rectwidth2, rectheight2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(50,175,50)';
context.fillStyle = 'black';
context.fill();
context.stroke();
//Bezier Curve Variables
var startx2 = 350;
var starty2 = 275;
var controlX1 = 275;
var controlY1 = 150;
var controlX2 = 150;
var controlY2 = 290;
var cornerX2 = 350;
var cornerY2 = 400;
var controlX3 = 550;
var controlY3 = 290;
var controlX4 = 425;
var controlY4 = 150;
var endx2 = 350;
var endy2 = 275;
//Bezier Curve
context.beginPath();
context.moveTo(startx2, starty2);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, cornerX2, cornerY2);
context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endx2, endy2);
context.lineCap = 'round';
context.lineWidth = .5;
context.strokeStyle = 'black';
context.fillStyle = 'red'
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment