html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
<title > 渐变颜色 </title>
- </head>
- <body onload="draw()">
- <canvas id="canvas" width="400" height="300"></canvas>
- <script>
- function draw() {
- var canvas = document.getElementById("canvas");
- if(canvas == null){
- return false;
- }
- var context = canvas.getContext("2d");
- var g1 = context.createLinearGradient(0,0,0,300);
- g1.addColorStop(0,"rgb(255,255,0)");
- g1.addColorStop(0.5,"rgb(0,255,255)");
- context.fillStyle = g1;
- // context.fillStyle = "#eeeeff"; // 填充的样式
- // context.fillRect(0,0,400,300);
- context.fillRect(0,0,300,400);
- var n = 0;
- var g2 = context.createLinearGradient(0,0,300,0);
- g2.addColorStop(0,"rgba(0,0,255,0.5)");
- g2.addColorStop(1,"rgba(255,0,0,0.5)");
- for(var i =0 ;i <10;i++){
- context.beginPath();
- context.fillStyle = g2;
- context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
- context.closePath();
- //context.fillStyle = 'rgba(255,0,0,0.25)';
- context.fill();
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/31543/6d15cfbfc3b698f45e933557066b132f.html