<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="500" 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", "magenta");
gradient.addColorStop("0.25", "green");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("0.75","yellow");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.strokeStyle = gradient;
ctx.lineWidth = 7;
ctx.strokeRect(40,40,700,400);
</script>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.