canvas 伞形的绘制

最新推荐文章于 2022-07-20 14:05:57 发布

Remainder_years

最新推荐文章于 2022-07-20 14:05:57 发布

阅读量1k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/qq_33808550/article/details/51895131

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伞形</title>
    <style>
        canvas{
          position: absolute;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">不支持canvas</canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //声明一个数组保存判断数据
    var jug = [];
    /*显示伞形代码
     x：圆的x坐标
     y：圆的x坐标
     radia_r：渐变的半径
     r：圆的半径
     beging：开始绘制圆的度数
     over：结束绘制圆的度数
     judge：判断是顺时针绘制还是逆时针绘制
     up_x：鼠标移入时的坐标x
     up_y：鼠标移入时的坐标y
     */
    function graph(x,y,radia_r,r,color,begin,over,judge,up_x,up_y){
        var grd=ctx.createRadialGradient(x,y,radia_r,x,y,r);
        grd.addColorStop(0,"white");
        grd.addColorStop(1,color);
        ctx.fillStyle=grd;
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.arc(x,y,r,begin,over,judge);
        ctx.fill();
        var judges=ctx.isPointInPath(up_x, up_y);
        //把每次获得到的结果保存到数组中
        jug.push(judges);
   }
    //根据数组里面的数据,来判断是否移入到伞形中
    function load(up_x,up_y){
        if(jug[2]==true){
            graph(190,150,10,100,'yellow',Math.PI,Math.PI*1.5,false,up_x,up_y);
            canvas.style="cursor:pointer";
        }else if(jug[1]==true){
            graph(190,160,10,100,'green',Math.PI/4,Math.PI,false,up_x,up_y);
            canvas.style="cursor:pointer";
        }else if(jug[0]==true){
            graph(210,150,10,100,'black',Math.PI/4,Math.PI*1.5,true,up_x,up_y);
            canvas.style="cursor:pointer";
        }else{
            canvas.style="cursor: default";
        }
    }
    //鼠标移入的时候,重画图像
        canvas.onmousemove=function(e){
            var up_x=e.pageX;
            var up_y=e.pageY;
            show(up_x,up_y);
        };
    //每次鼠标移动的时候重绘伞形
         function  show(up_x,up_y){
             ctx.clearRect(0,0,canvas.width,canvas.height);
             jug.length=0;
             graph(210,150,10,100,'#D51317',Math.PI/4,Math.PI*1.5,true,up_x,up_y);
             graph(190,160,10,100,'#52D8DB',Math.PI/4,Math.PI,false,up_x,up_y);
             graph(190,150,10,100,'#3436EC',Math.PI,Math.PI*1.5,false,up_x,up_y);
             load(up_x,up_y);
         }
    //网页加载时
        window.onload=function(){
            show(0,0);
        }
</script>
</html>

Remainder_years

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 伞形的绘制

html lang="en">head> meta charset="UTF-8"> title>伞形title> style> canvas{ position: absolute; } style>head>body>canvas id="canvas" width="400" height="400"
复制链接

扫一扫

专栏目录