canvas作图，动图练习

标签：canvas 动图作图 ctx color colors func var 255
代码：
<!Doctype html>
<html lang="zh_cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Canvas</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    </head>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #FF0000;bgcolor:#FF0000;">
</canvas>

<script>
function getRandInt255(){
    var randomNumber = Math.floor(Math.random() * 255) + 1;
    return randomNumber;
}

function getRandInt10(){
    var randomNumber = Math.floor(Math.random() * 10) + 1;
    return randomNumber;
}

function getRandInt50(){
    var randomNumber = Math.floor(Math.random() * 50) + 1;
    return randomNumber;
}

function getRandInt300(){
    var randomNumber = Math.floor(Math.random() * 300) + 1;
    return randomNumber;
}

var start_border_width = 1;
var start_border_flag = 0;
var colors = {};
var steps = {
    'juxing_da' : getRandInt10(),
    'juxing_xiao' : getRandInt10(),

    'zhixian_zuoshang_youxia' : getRandInt10(),
    'zhixian_zuoxia_youshang' : getRandInt10(),

    'yuanxing_zuoshang' : getRandInt10(),
    'yuanxing_zuoxia' : getRandInt10(),
    'yuanxing_youshang' : getRandInt10(),
    'yuanxing_youxia' : getRandInt10(),

    'wenzi_zuoshang' : getRandInt10(),
    'wenzi_zuoxia' : getRandInt10(),
    'wenzi_youshang' : getRandInt10(),
    'wenzi_youxia' : getRandInt10(),
    
    'set_biankuang' : getRandInt10(),
    'qingli_huabu' : getRandInt10(),
};

var global_rgbs = {
    'juxing_da' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'juxing_xiao' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},

    'zhixian_zuoshang_youxia' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'zhixian_zuoxia_youshang' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},

    'yuanxing_zuoshang' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'yuanxing_zuoxia' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'yuanxing_youshang' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'yuanxing_youxia' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},

    'wenzi_zuoshang' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'wenzi_zuoxia' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'wenzi_youshang' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'wenzi_youxia' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    
    'set_biankuang' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
    'qingli_huabu' : {'r':getRandInt255(), 'g':getRandInt255(), 'b':getRandInt255()},
};

//直线-左上到右下
function zhixian_zuoshang_youxia(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    //console.log("r:"+r+" g:"+g+" b:"+b);
    
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    //createLinearGradient(xStart, yStart, xEnd, yEnd)
    var grd=ctx.createLinearGradient(176,176,424,424);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.beginPath(); // 开始新的路径
    ctx.moveTo(176,176);
    ctx.lineTo(424,424);
    ctx.strokeStyle=grd;
    ctx.lineWidth='5';
    ctx.stroke(); // 绘制线条
    return ctx;
}

//直线-左下到右上
function zhixian_zuoxia_youshang(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    
    //console.log("r:"+r+" g:"+g+" b:"+b);

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    //createLinearGradient(xStart, yStart, xEnd, yEnd)
    var grd=ctx.createLinearGradient(176,424,424,176);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.beginPath(); // 开始新的路径
    ctx.moveTo(176,424);
    ctx.lineTo(424,176);
    ctx.strokeStyle=grd;
    ctx.lineWidth='5';
    ctx.stroke(); // 绘制线条
    return ctx;
}


//圆形-左上
function yuanxing_zuoshang(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    //createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
    var grd=ctx.createRadialGradient(115,115,35,185,185,35);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.beginPath(); // 开始新的路径
    ctx.arc(150,150,35,0,2*Math.PI);
    ctx.lineWidth='1';
    ctx.fillStyle ="rgb("+r+","+g+","+b+")";
    ctx.fill();
    return ctx;
}

//圆形-左下
function yuanxing_zuoxia(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    //createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
    var grd=ctx.createRadialGradient(115,415,35,185,485,35);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.beginPath(); // 开始新的路径
    ctx.arc(150,450,35,0,2*Math.PI);
    ctx.lineWidth='10';
    ctx.fillStyle=grd;
    ctx.fill();
    return ctx;
}

//圆形-右上
function yuanxing_youshang(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    //createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
    var grd=ctx.createRadialGradient(415,115,35,485,185,35);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.beginPath(); // 开始新的路径
    ctx.arc(450,150,35,0,2*Math.PI);
    ctx.lineWidth='10';
    ctx.fillStyle=grd;
    ctx.fill();
    return ctx;
}

//圆形-右下
function yuanxing_youxia(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    //createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
    var grd=ctx.createRadialGradient(415,415,35,485,485,35);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.beginPath(); // 开始新的路径
    ctx.arc(450,450,35,0,2*Math.PI);
    ctx.lineWidth='10';
    ctx.fillStyle=grd;
    ctx.fill();
    return ctx;
}

//矩形
function juxing_da(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    //createLinearGradient(xStart, yStart, xEnd, yEnd)
    var grd=ctx.createLinearGradient(150,150,450,450);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.fillStyle=grd;
    ctx.fillRect(150,150,300,300);
    return ctx;
}

//矩形
function juxing_xiao(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    //createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
    var grd=ctx.createRadialGradient(300,300,200,800,800,200);
    grd.addColorStop(0,"rgb("+r+","+g+","+b+")");
    grd.addColorStop(1,"rgb("+(255-r)+","+(255-g)+","+(255-b)+")");
    
    ctx.fillStyle=grd;
    ctx.fillRect(200,200,200,200);
    return ctx;
}

//文字-左上
function wenzi_zuoshang(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.font="40px Arial";
    ctx.fillText("壹",130,170);
    return ctx;
}

//文字-左下
function wenzi_zuoxia(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.font="40px Arial";
    ctx.fillText("叁",130,470);
    return ctx;
}

//文字-右上
function wenzi_youshang(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.font="40px Arial";
    ctx.fillText("贰",430,170);
    return ctx;
}

//文字-右下
function wenzi_youxia(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    ctx.fillStyle="rgb("+r+","+g+","+b+")";
    ctx.font="40px Arial";
    ctx.fillText("肆",430,470);
    return ctx;
}


//清理画布
function qingli_huabu(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillStyle = "rgb("+r+","+g+","+b+")";
    ctx.fillRect(0, 0, c.width, c.height);
}


//设置canvas边框
function set_biankuang(){
    var func = arguments.callee.name;
    if((func in colors) == false){
        var r = global_rgbs[func]['r'];
        var g = global_rgbs[func]['g'];
        var b = global_rgbs[func]['b'];
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    else{
        var color = colors[func];
        var r = color['r'];
        var g = color['g'];
        var b = color['b'];
        r = (r + steps[func]) % 255 + 1;
        g = (g + steps[func]) % 255 + 1;
        b = (b + steps[func]) % 255 + 1;
        var color = {'r':r, 'g':g, 'b':b};
        colors[func] = color;
    }
    
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath(); // 开始新的路径
    ctx.lineWidth = start_border_width;
    ctx.strokeStyle = "rgb("+r+","+g+","+b+")";
    ctx.strokeRect(0, 0, c.width, c.height);
    
    if(start_border_flag == 0){
        if(start_border_width > 200){
            start_border_flag = 1;
            start_border_width = start_border_width - 1;
        }
        else{
            start_border_width = start_border_width + 1;
        }
    } else if(start_border_flag == 1) {
        if(start_border_width < 1){
            start_border_flag = 0;
            start_border_width = start_border_width + 1;
        }
        else{
            start_border_width = start_border_width - 1;
        }
    }
    //console.log(start_border_width);
}

//测试
function test0(){
    qingli_huabu();
}

function test1(){
    set_biankuang();
}

function test2(){
    juxing_da();
    juxing_xiao();
}

function test3(){
    zhixian_zuoshang_youxia();
    zhixian_zuoxia_youshang();
}

function test4(){
    yuanxing_zuoshang();
    yuanxing_zuoxia();
    yuanxing_youshang();
    yuanxing_youxia();
}

function test5(){
    wenzi_zuoshang();
    wenzi_zuoxia();
    wenzi_youshang();
    wenzi_youxia();
}

setInterval("test0()", 2000);
setInterval("test1()", 40);
setInterval("test2()", 1000);
setInterval("test3()", 1000);
setInterval("test4()", 1000);
setInterval("test5()", 1000);

</script>

</body>
</html>
效果:
标签：canvas,动图,作图,ctx,color,colors,func,var,255
From： https://www.cnblogs.com/xuxiaobo/p/18394044
相关文章

赞助商

阅读排行
