html5 canvas 色彩渐变

html5 canvas 颜色渐变

<script type="text/javascript">
    function canvasOperator() {
        var myCanvas = document.getElementById('myCanvas');
        var context = myCanvas.getContext('2d');
        //line gradients
        var lineGradients = context.createLinearGradient(0, 0, 500, 0);
        lineGradients.addColorStop(0, 'black');
        lineGradients.addColorStop(1, 'white');
        context.fillStyle = lineGradients;//give gradient object to context.fillStyle
        context.fillRect(0, 0, 500, 200);
   
        var myCanvas1 = document.getElementById('myCanvas1');
        var context1 = myCanvas1.getContext('2d');
        //line gradients
        var lineGradients1 = context1.createLinearGradient(0, 0, 0, 200);
        //渐变位置可以在0和1之间任意位置取值
        lineGradients1.addColorStop(0, 'black');
        lineGradients1.addColorStop(1, 'white');
        lineGradients1.addColorStop(0.7, 'blue');
        lineGradients1.addColorStop(0.5, 'red');
        //fillStyle:可以设置为css颜色，一个图案或一种颜色渐变
        context1.fillStyle = lineGradients1;//give gradient object to context1.fillStyle
        context1.fillRect(0, 0, 200, 500);

 

var myCanvas2 = document.getElementById('myCanvas2');

var context2 = myCanvas2.getContext('2d');

 

//沿着两个圆之间的锥面，绘制渐变。前三个参数代表开始的圆，圆心为(x0,y0),半径为r0.最后三个参数代表结束的圆，圆心为

//(x1,y1),半径为r1 

var radialGradient = context2.createRadialGradient(100,100,50,400,400,50);

context2.fillStyle=radialGradient;

radialGradient.addColorStop(0, 'black');

radialGradient.addColorStop(1, 'white');

context2.fillRect(0, 0, 500, 500);

 

    }
</script>