canvas练习

1.绘制验证码

<canvas id="c1" width="300" height="150"></canvas>
    <script>
        var w=300;
        var h=150;
        function rn(max,min) {
           return  parseInt(Math.random()*(max-min+1)+min);
        }
        var c1=document.getElementById("c1");
        //创建画笔
        var ctx=c1.getContext("2d");
        //画背景
        function bj(min,max) {
            var r=rn(max,min);
            var g=rn(max,min);
            var b=rn(max,min);
            return `rgb(${r},${g},${b})`;
        }
        c1.style.background=bj(180,240);
        //随机字母
        ctx.textBaseline="top";
        var str=["a","b","c","d","f","g","h","j","k","u",1,2,3,4,5,6,7,8,9,0];
        for(var i=0; i<4;i++){
            var fontSize=rn(70,50);
            var deg=rn(10,-9);
            ctx.fillStyle=bj(0,150);
            ctx.save();
            ctx.rotate(deg*Math.PI/180);
            ctx.font = ""+fontSize+"px sans-serif";
            ctx.fillText(str[rn(str.length-1,0)],40+fontSize*i,30);
            ctx.restore();
        }
        //画干扰点
        function dian(x,y){
            ctx.fillStyle=bj(0,150);
            ctx.beginPath();
            ctx.arc(x,y,1,0*Math.PI/180,360*Math.PI/180);
            ctx.fill();
        }
        for(var i=0; i<200;i++){
            dian(rn(w,0),rn(h,0));
        }
        //画干扰线
        function xian(x,y){
            ctx.strokeStyle=bj(0,150);
            ctx.beginPath();
            ctx.moveTo(rn(w,0),rn(h,0));
            ctx.lineTo(x,y);
            ctx.stroke();
        }
        for(var i=0; i<20;i++){
            xian(rn(w,0),rn(h,0));
        }
    </script>

2.绕自身旋转动画

<canvas id="v3" width="500px" height="400px"></canvas>
<script>
    var v3=document.getElementById("v3");
    var ctx=v3.getContext("2d");
    var p3=new Image();
    p3.src="img/play.png";
    p3.onload =function () {
        var deg1=10;//旋转角度
        var timer=setInterval(function () {
            ctx.clearRect(0,0,500,400);
            var xpos = v3.width/2;
            var ypos = v3.height/2;
            ctx.drawImage(p3, xpos - p3.width / 2, ypos - p3.height / 2);
            ctx.save();
            ctx.translate(xpos, ypos);
            ctx.rotate(deg1 * Math.PI / 180);//旋转
            ctx.translate(-xpos, -ypos);
            ctx.drawImage(p3, xpos - p3.width / 2, ypos - p3.height / 2);
            ctx.restore();
            deg1+=10;
        },100);
    }
</script>

3.吃豆人

<h1>吃豆人</h1>
<canvas id="v3" width="500px" height="400px"></canvas>
<script>
    var v3=document.getElementById("v3");
    var ctx=v3.getContext("2d");
    //脸
    CanvasRenderingContext2D.prototype.sector = function(x,y,r,angle1,angle2){
        this.save();
        this.beginPath();
        this.moveTo(x,y);
        this.arc(x,y,r,angle1*Math.PI/180,angle2*Math.PI/180,false);
        this.closePath();
        this.restore();
        return this;
    }
    function yan() {
        //眼
        ctx.beginPath();
        ctx.arc(210,300-30,10,0*Math.PI/180,360*Math.PI/180);
        ctx.fillStyle="#fff";
        ctx.fill();
        ctx.stroke();
    }
    function noopen() {
        ctx.beginPath();
        ctx.lineWidth=2;
        ctx.strokeStyle="#000";
        ctx.arc(200,300,50,0*Math.PI/180,360*Math.PI/180);
        ctx.fillStyle="yellow";
        ctx.fill();
        ctx.stroke();
        yan();
        //嘴
        ctx.beginPath();
        ctx.moveTo(200,300);
        ctx.lineTo(250,300);
        ctx.lineWidth=2;
        ctx.strokeStyle="#000";
        ctx.stroke();
    }
    function open(){
        noopen();
        ctx.fillStyle="#ddd";
        ctx.sector(200,300,52,330,30).fill();
    var oid=0;
    var timer=setInterval(function () {
        ctx.clearRect(0,0,500,400);
        oid++;
        oid%2==0 ? open():noopen();
    },500)
</script>