html5_canvas上的線性漸變
阿新 • • 發佈：2018-12-22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function draw(){
var ctx=document.getElementById("myCanvas").getContext("2d");
var lingrad=ctx.createLinearGradient(0,0,0,200);
lingrad.addColorStop(1/7,'#ff0000');
lingrad.addColorStop(3/7,'#ffff00');
lingrad.addColorStop(4/7,'#00ffff');
lingrad.addColorStop(5/7,'#0000ff');
lingrad.addColorStop(6/7,'#ff00ff');
lingrad.addColorStop(1,'#ff0000');
// ctx.fillStyle=lingrad;
// ctx.fillRect(10,10,200,200);
// ctx.lineWidth=5;
ctx.strokeStyle=lingrad;
}
window.onload=function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="240"></canvas>
</body>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function draw(){
var ctx=document.getElementById("myCanvas").getContext("2d");
var lingrad=ctx.createLinearGradient(0,0,0,200);
lingrad.addColorStop(1/7,'#ff0000');
lingrad.addColorStop(3/7,'#ffff00');
lingrad.addColorStop(4/7,'#00ffff');
lingrad.addColorStop(5/7,'#0000ff');
lingrad.addColorStop(6/7,'#ff00ff');
lingrad.addColorStop(1,'#ff0000');
// ctx.fillStyle=lingrad;
// ctx.fillRect(10,10,200,200);
// ctx.lineWidth=5;
ctx.strokeStyle=lingrad;
}
window.onload=function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="240"></canvas>
</body>
</html>
