紫陌~ 2021-10-22 23:50 采纳率: 84.6%
浏览 29
已结题

HTML5canvas绘图,怎么去掉阴影?

怎么把个%75,%25,去掉阴影。并且饼图要阴影。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影饼图</title>
    <style>
        #mycanvas{
                border: 2px solid #7FFFD4;
            }
    </style>
    <script>
        function draw () {
        var mycanvas=document.getElementById("mycanvas");
        var ctx=mycanvas.getContext("2d");
        
         //阴影
        ctx.shadowOffsetX=7;
        ctx.shadowOffsetY=7;
        ctx.shadowBlur=5;
        ctx.shadowColor="#999999";
        
        //第一个圆
        ctx.fillStyle="#7FFFD4";
        ctx.moveTo(200,200);
        ctx.arc(200,200,100,0,1.5*Math.PI); 
        ctx.closePath()
        ctx.fill()
        //第二个圆
        ctx.fillStyle="#ADFF2F";      
        ctx.moveTo(220,180);
        ctx.arc(220,180,100,0,1.5*Math.PI,true); 
        ctx.closePath()
        ctx.fill()
        
        //文字渐变
        var gradient=ctx.createLinearGradient(0,0,0,250);
        gradient.addColorStop(0,"green");
        gradient.addColorStop(1,"yellow");
        ctx.fillStyle=gradient;
        ctx.font='italic 30px 微软雅黑';
        ctx.fillText('%75',140,240)
        ctx.fillText('%25',230,150)
    }    
      
        
    </script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="500" height="500" ></canvas>
</body>
</html>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 10月30日
    • 创建了问题 10月22日

    悬赏问题

    • ¥15 GD32H7 从存储器到外设SPI传输数据无法重复启用DMA
    • ¥25 LT码在高斯信道下的误码率仿真
    • ¥45 渲染完成之后将物体的材质贴图改变,自动化进行这个操作
    • ¥15 yolov5目标检测并显示目标出现的时间或视频帧
    • ¥15 电视版的优酷可以设置电影连续播放吗?
    • ¥50 复现论文;matlab代码编写
    • ¥30 echarts 3d地图怎么实现一进来页面散点数据和卡片一起轮播
    • ¥15 数字图像的降噪滤波增强
    • ¥15 心碎了,为啥我的神经网络训练的时候第二个批次反向传播会报错呀,第一个批次都没有问题
    • ¥15 MSR2680-XS路由器频繁卡顿问题