<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:3px solid #FF00FF;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200,300);
gradient.addColorStop("0", "blue");
gradient.addColorStop("0.25", "green");
gradient.addColorStop("0.5", "yellow");
gradient.addColorStop("0.75","red");
gradient.addColorStop("1.0", "magenta");
ctx.strokeStyle = gradient;
ctx.lineWidth = 7;
ctx.strokeRect(40,40,400,300);
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.arc(200,200,100, 0, 2.0 * Math.PI, false);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 5;
ctx.stroke();
ctx.globalCompositeOperation = "xor";
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.arc(300,200,100, 0, 2.0 * Math.PI, false);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.