首页 > 代码库 > canvas小图123

canvas小图123

2024-08-31 19:58:49   221人阅读

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>

技术分享

 

 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>


 

canvas小图123


联系
我们