canvas-3radialGradient.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;">
        The current browser does not support Canvas, can replace the browser a try!
    </canvas>

    <script>

        window.onload = function(){
            var canvas = document.getElementById('canvas');

            canvas.width = 800;
            canvas.height = 800;

            if(canvas.getContext('2d')){
                var context = canvas.getContext('2d');

                // begin
                var radialGrad = context.createRadialGradient(400,400,0,400,400,500);
                radialGrad.addColorStop(0.0,'white');
                radialGrad.addColorStop(0.25,'yellow');
                radialGrad.addColorStop(0.5,'green');
                radialGrad.addColorStop(0.75,'blue');
                radialGrad.addColorStop(1.0,'black');
                context.fillStyle = radialGrad;
                context.fillRect(0,0,800,800)

            }else{
                alert('当前游览器不支持Canvas，请更换游览器后再试！');
            }
        }
    </script>
</body>
<script>
    /*总结
    step 1
        // 内圆的圆心（x0,y0） 内圆半径r0
        var grd = context.creatRadialGradient(x0,y0,r0,x1,x1,r1)
    step 2
        //stop的值域[0,1]
        grd.addColorStop(stop,color)
    */
</script>
</html>

相关阅读:
朴素贝叶斯算法
生成模型与判别模型
决策树 ID3，C4.5 CART
KNN 分类程序
php的空间命名
模式设计六大原则
javascript 的设计模式（更新中）
typescript 学习笔记
PHP 关于smarty模板引擎的使用
简易封装PDO的操作类

原文地址：https://www.cnblogs.com/cynthia-wuqian/p/4981642.html