This is the first real graphic I made with TextWrangler. Be prepared for my big project.
Its going to look awesome!!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//heart
var x = 400;
var y = 300;
var controlx1 = 500;
var controly1 = 150;
var controlx2 = 600;
var controly2 = 250;
var endx = 400;
var endy = 500;
var controlx3 = 200;
var controly3 = 400;
var controlx4 = 300;
var controly4 = 250;
var endx1 = 400;
var endy1 = 300;
//rectangle
var x3 = 150;
var y3 = 150;
var width = 500;
var height = 500;
//gradient
var startx = 150;
var starty = 150;
var endx = 500;
var endy = 500;
context.beginPath();
context.rect(x3, y3, width, height);
context.lineWidth = 5;
var grd = context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0, 'rgb(0, 0, 100)');
grd.addColorStop(1, 'rgb(0, 0, 250)');
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, endx1, endy1);
context.closePath();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment