zoukankan      html  css  js  c++  java
  • canvas小图123

    1 绘制扇形图

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 600px;
                height: 600px;
                margin:30px auto;
                border:1px solid orange;
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id="canvas"></canvas>
        </div>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = 600;
        canvas.height = 600;
        var data = [
            {
                value:0.6,
                color:"lightcoral",
                text:"记者"
            },{
                value:0.1,
                color:"lightblue",
                text:"naive"
            },{
                value:0.1,
                color:"lightgreen",
                text:"simple"
            },{
                value:0.2,
                color:"darkgray",
                text:"跑得快"
            }
        ];
        //先画一个扇形
        //圆心就是300  300
        //半径就是200
        //start = 0 ,end = Math.PI*2*0.2
        //我们的文字放置位置
        //x=300+200*Math.cos(0.1*Math.PI*2)
        //y=300+200*Math.sin(0.1*Math.PI*2)
      
        // ctx.textAlign ="left";
        // ctx.textBaseLine = "top";
        var start=0;
        var end = 0;
        var text = 0;
        var r = 200;
        for(var i=0;i<data.length;i++){
            ctx.beginPath();
            ctx.moveTo(300,300);
            end = start+data[i].value*2*Math.PI;
            ctx.arc(300,300,r,start,end);
            ctx.closePath();
            ctx.fillStyle=data[i].color;
            ctx.fill();
            ctx.stroke();
            // ctx.font="16px 微软雅黑";
            text = start + data[i].value/2*2*Math.PI;
            var x = 300+r*Math.cos(text);
            var y = 300+r*Math.sin(text);
           
            if(x>300){
                ctx.textAlign="start";
                // x=x+10;
            }else{
                ctx.textAlign="end";
                // x=x-10;
            }
            if(y>300){
                ctx.textBaseLine = "top";
                y=y+10;
            }else{
                ctx.textBaseLine = "bottom";
                // y=y-10
            }
            ctx.fillText(data[i].text,x,y);
            start = end;
        }
    </script>
    </body>
    </html>
      
    //动图版
      var start = 0;
        var end = 0;
        var p = Math.PI*2;
        var i=0;
        function animate(){
            ctx.beginPath();
            var flag = 0;
            canvas.timer = setInterval(function(){
                flag++;
                ctx.moveTo(300,300);
                end = start+ flag/100*p;
                ctx.arc(300,300,200,start,end);
                ctx.fillStyle=data[i].color;
                ctx.fill();
                if(flag==data[i].value*100){
                    clearInterval(canvas.timer);
                    ctx.closePath();
                    start = end;
                    i++;
                    if(i<data.length){
                        animate();
                    }
                }
            },1000/60)
        }
        animate()

     2 小光点

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>绘制彩色光点</title>
    </head>
    <body>
    <canvas id="canvas">
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");//获得画布
        var ctx = canvas.getContext("2d");//得到canvas的上下文对象(获得画布控制权)
        canvas.width = 500;
        canvas.height= 500;
        canvas.style.background = "white";
        canvas.style.border = "1px solid darkgray";
        canvas.style.position="relative";
        canvas.style.left="400px";
        canvas.onmousedown=function(e){
            var x = e.clientX;
            var y = e.clientY+this.offsetTop;
                canvas.onmousemove=function(e){
                    var moveX = e.clientX;
                    var moveY = e.clientY+this.offsetTop;
                    ctx.beginPath();
                    ctx.arc(x-this.offsetLeft,y,moveX-x,2*Math.PI,false);
                    ctx.closePath();
                    var color = "rgba("+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+",1)";
                    ctx.fillStyle = color;
                    ctx.fill();
                }
                canvas.onmouseup=function(){
                    canvas.onmousemove =null;
                }
        }
    
    
    
        
    </script>
    </body>
    </html>

     3 刮奖功能

    刮出一个谢就可以,何必要把谢谢惠顾四个字都刮出来才肯放手呢

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>擦除效果</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 500px;
                margin:50px auto;
                /*border:1px solid #ccc;*/
               background-image: url(img/starks.jpg);
            }
        </style>
    </head>
    <body>
    <div>
        <canvas id="canvas">
        
        </canvas>
    </div>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = 500;
        canvas.height= 500;
        ctx.fillRect(0, 0, 500, 500)
        
        //擦除功能:手动(通过鼠标拖放)绘制一个矩形,绘制出的矩形里面的内容被清除
        canvas.onmousedown=function(e){
            var e = e ||window.event;
            // console.log(e);
            if(e.button==0){
                var startX = e.clientX - canvas.offsetLeft;
                var startY = e.clientY - canvas.offsetTop;
                // console.log(canvas.offsetTop)
                canvas.onmousemove=function(e){
                    var e = e ||window.event;
                    var endX = e.clientX - canvas.offsetLeft;
                    var endY = e.clientY - canvas.offsetTop;
                    var width = endX- startX;
                    var height = endY - startY ;
                    ctx.clearRect(startX,startY,width,height);
                }
                canvas.onmouseup=function(){
                    if(e.button==0){
                        canvas.onmousemove=null;
                    }
                }
            }
    
        }
    </script>
    </body>
    </html>


  • 相关阅读:
    macOS 的 rootless 机制的关闭与打开
    关于 Android 9.0 ClassNotFoundException: Didn't find class "org.apache.http.protocol.BasicHttpContext"
    Android 笔记
    AS apk 安装不了问题
    关于 android.view.WindowLeaked: 窗体泄露
    AS 解决support-annotations版本冲突
    Android xml 设置半透明
    macOS 配置 adb 和 Android Studio 配置夜神模拟器
    iOS 获取控件相对屏幕(父N级)坐标位置
    NSInternalInconsistencyException attempt to delete row 2 from section 4 which only contains 0 rows before the update 问题原因
  • 原文地址:https://www.cnblogs.com/rlann/p/6279698.html
Copyright © 2011-2022 走看看