html5 canvas元素漸變
阿新 • • 發佈：2019-02-17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{background: #b8edc9;}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="800">
您的瀏覽器不支援
</canvas>
<script type="text/javascript">
var canvans=document.getElementById('mycanvas');
c=canvans.getContext('2d');
//漸變1
// g=c.createLinearGradient(50,50,400,100);//createLinearGradient建立漸變色（x1,y1,x2,y2）顏色漸變的起點和終點
// g.addColorStop(0,"#000000");//（位置，”顏色“）0表示起點。。插入點。。1表示終點。
// g.addColorStop(0.8,"red");
// g.addColorStop(1,"#FFFFFF");
// c.fillStyle=g;
// c.fillRect(50,50,400,300)
//漸變2
// g=c.createRadialGradient(50,300,10,700,300,150);
// g.addColorStop(0,"#000000");
// g.addColorStop(0.8,"red");
// c.fillStyle=g;
// c.fillRect(50,50,600,450)
//漸變3
g=c.createRadialGradient(400,300,10,400,300,200);
c.fillStyle=g;
c.arc(400,300,200,0,Math.PI*2);
c.fill();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{background: #b8edc9;}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="800">
您的瀏覽器不支援
</canvas>
<script type="text/javascript">
var canvans=document.getElementById('mycanvas');
c=canvans.getContext('2d');
//漸變1
// g=c.createLinearGradient(50,50,400,100);//createLinearGradient建立漸變色（x1,y1,x2,y2）顏色漸變的起點和終點
// g.addColorStop(0,"#000000");//（位置，”顏色“）0表示起點。。插入點。。1表示終點。
// g.addColorStop(0.8,"red");
// g.addColorStop(1,"#FFFFFF");
// c.fillStyle=g;
// c.fillRect(50,50,400,300)
//漸變2
// g=c.createRadialGradient(50,300,10,700,300,150);
// g.addColorStop(0,"#000000");
// g.addColorStop(0.8,"red");
// c.fillStyle=g;
// c.fillRect(50,50,600,450)
//漸變3
g=c.createRadialGradient(400,300,10,400,300,200);
g.addColorStop(0,"#000000");
g.addColorStop(0.8,"red");
g.addColorStop(1,"#FFFFFF");c.fillStyle=g;
c.arc(400,300,200,0,Math.PI*2);
c.fill();
</script>
</body>
</html>