笔记

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>放射性渐变</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
    此浏览器不支持Canvas!
</canvas>

<script type="text/javascript">

    var myCanvas = document.getElementById('myCanvas');
    var g = myCanvas.getContext('2d');

     /* 放射性渐变范例      参数:起始位置x,y,终点的x,y */
    var gradient=g.createRadialGradient(100,120,0,100,120,150);
    gradient.addColorStop(0,"red");
    gradient.addColorStop(0.2,"yellow");
    gradient.addColorStop(0.4,"green");
    gradient.addColorStop(0.6,"blue");

    g.fillStyle = gradient;

 /*圆     圆心x,圆心y,半径,开始角,结束角*/
    g.arc( 100, 120,  50,  0*Math.PI,2*Math.PI);
    g.fill();
    
    
    
    
  /*  *//* 线性渐变范例     参数:起始位置x,y,终点的x,y *//*
    var gradient=g.createLinearGradient(20,20, 10,150);
    gradient.addColorStop(0,"red");
    gradient.addColorStop(0.5,"yellow");
    gradient.addColorStop(1,"green");
    g.strokeStyle = gradient;

    *//*矩形 x,y,宽,高*//*
    g.rect(30,20,100,100);
    g.lineWidth = 20;  
    g.stroke();       */       
    

</script>

</body>
</html>


你可能感兴趣的:(笔记)