<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var rectx1 = 0;
var recty1 = 0;
var rectwidth1 = 800;
var rectheight1 = 600;
var startx = 0
var starty = 0
var endx = 600
var endy = 800
//rectangle
context.beginPath();
context.rect(rectx1, recty1, rectwidth1, rectheight1);
context.strokeStyle = 'rgb(153, 102, 255)';
//context.fillStyle = 'rgb(255, 204, 204)';
var grd = context.createLinearGradient (startx, starty, endx, endy);
grd.addColorStop (0, 'white');
grd.addColorStop (.25, 'rgb(0, 255, 255)');
grd.addColorStop (.75, 'rgb(255, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
//bezier curve left
var x = 450;
var y = 160
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350
var endY = 325
//quadratic curve left
var controlx3 = 425;
var controly3 = 385;
var endx3 = 450;
var endy3 = 480;
//quadratic curve right
var controlx4 = 475;
var controly4 = 375;
var endx4 = 550;
var endy4 = 325;
//bezier curve right
var controlx5 = 755;
var controly5 = 180;
var controlx6 = 550;
var controly6 = 15;
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY)
context.quadraticCurveTo(controlx3, controly3, endx3, endy3);
context.quadraticCurveTo(controlx4, controly4, endx4, endy4);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, x, y);
context.closePath();
context.fillStyle = 'rgb(255, 100, 150)';
context.fill();
context.lineWidth = 7
context.strokeStyle = 'maroon'
var grd = context.createRadialGradient(285, 150, 200, 525, 430, 300);
grd.addColorStop(.7, 'white');
grd.addColorStop(1, 'rgb(255, 51, 153)');
context.fillStyle = grd
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