• canvas绘制小人开口和闭口


    css:
    <style>
    body{
    text-align: center;
    }
    canvas{
    background: #ddd;
    }
    </style>
    canvas标签:
    <canvas id="canvas" width="500" height="400"></canvas>
    js:
    var elem = document.getElementById("canvas");
    var canvas = elem.getContext("2d");
    //开始路径

    //张嘴函数
    function openMouth(){
    canvas.beginPath();
    canvas.arc(250,200,100,30*Math.PI/180,330*Math.PI/180);
    canvas.lineTo(250,200);
    canvas.fillStyle = "yellow";
    canvas.fill();
    canvas.closePath();
    canvas.stroke();
    //眼睛
    canvas.beginPath();
    canvas.arc(270,150,25,Math.PI*2,false);
    canvas.fillStyle = "#38f";
    canvas.fill();
    canvas.stroke();
    //眼神
    canvas.beginPath();
    canvas.arc(275,140,8,Math.PI*2,false);
    canvas.fillStyle = "white";
    canvas.fill();
    canvas.stroke();
    }
    //openMouth();
    //闭嘴函数
    function closeMouth(){
    canvas.beginPath();
    canvas.arc(250,200,100,0,2*Math.PI);
    canvas.fillStyle = "orange";
    canvas.fill();
    canvas.lineTo(250,200);
    canvas.stroke();
    //眼睛
    canvas.beginPath();
    canvas.arc(260,150,25,Math.PI*2,false);
    canvas.fillStyle = "#38f";
    canvas.fill();
    canvas.stroke();
    //眼神
    canvas.beginPath();
    canvas.arc(270,145,8,Math.PI*2,false);
    canvas.fillStyle = "white";
    canvas.fill();
    canvas.stroke();
    }
    // closeMouth();
    //定是闭嘴或者张嘴
    var index = 1 ;
    var timer = setInterval(function(){
    canvas.clearRect(0,0,500,400);
    index ++;
    if(index%2==0){
    openMouth();
    }else{
    closeMouth();
    }
    },1000);

  • 相关阅读:
    C#计算某一些任务的执行时间(消耗时间)
    C#打印条码的几种方式
    使用escape编码地址栏中的中文字符
    SQL 批量删除数据表
    弹出层并锁定页面
    后台输出HTML
    C# 十进制与十六进制互转
    SQL判断临时表是否存在
    SQL Server 字符串处理
    Vue文件跳转$router传参数
  • 原文地址:https://www.cnblogs.com/wangruifang/p/7509586.html
Copyright © 2020-2023  润新知