<!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>
canvas 伞形的绘制
最新推荐文章于 2023-04-27 14:38:50 发布