Wednesday, February 6, 2013

Dig Art, Hearts

In class heart and rectangle assignment:

COPY AND PASTE THIS:
file:///Volumes/Student%20Server/Spring%202013/ART/ART%20COM%20210%20A%20-%20Beginning%20Digital%20Arts%20-%20Corrigan/Rikki%20Berk/in%20class%20heart.html




<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

var rectx5= 300;
var recty5= 100;
var rectwidth5= 400;
var rectheight5= 400;
var startx6= 0;
var starty6= 300;
var endx6= 800;
var endy6= 300;


  context.beginPath();
 context.rect(rectx5, recty5, rectwidth5, rectheight5);
  context.lineWidth = 10;
  context.strokeStyle = 'rgb(250, 100, 100)';
  var grd= context.createLinearGradient(startx6, starty6, endx6, endy6);
  grd.addColorStop(0, 'rgb(225, 225, 225)');
  grd.addColorStop(1, 'rgb(0, 0, 0)');
    context.fillStyle = grd;
  context.fill();
  context.stroke();



var x2 = 500;
var y2 = 600;
var controlX1 = 100;
var controlY1 = 100;
var controlX2 = 500;
var controlY2 = 100;
var endX2 = 500;
var endY2 = 300;

var x3 = 500;
var y3 = 600;
var controlX3 = 700;
var controlY3 = 100;
var controlX4 = 700;
var controlY4 = 200;

context.beginPath();
context.moveTo(x2, y2);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX2, endY2);
context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, x2, y2);
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