画布____渐变圆圈

我就是我 2021-09-15 15:02 348阅读 0赞

直接上代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="can"></canvas>
    </body>
    <script>
        var canvas = document.querySelector('#can');
        var c = canvas.getContext('2d');//作画的地方
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;//画布宽
        canvas.height = h;//画布高
        var bgfade = c.createLinearGradient(0, 0, canvas.width, canvas.height);//坐标0,0,宽高w,h参数是这样.沿着对角线渐变
        bgfade.addColorStop(0.0, "#88f");//addColorStop()是createLinearGradient对象的方法,第一个参数是0.0~1.0的数字,第二参数是css颜色值,意思是以左上角为亮蓝色开始
        bgfade.addColorStop(1.0, "#fff");//一直到右下角以白色结束
        var peekhole = c.createRadialGradient(300, 300, 100, 300, 300, 300);//两个同心圆,圆心300,300,半径100和300,两个同心圆的渐变中间为透明色,然后慢慢灰色半透明,最后再回到透明色
        peekhole.addColorStop(0.0, "transparent");//透明
        peekhole.addColorStop(0.7, "rgba(100,100,100,.9)");//灰色半透明
        peekhole.addColorStop(1.0, "rgba(0,0,0,0)");//再次透明
        c.fillStyle = bgfade;//以线性渐变开始
        c.fillRect(0, 0, 600, 600);//填充真个画布
        c.fillStyle = peekhole;//切换辐射状渐变 `   
        c.fillRect(0, 0, 600, 600)//使用半透明填充来遮罩画布
    </script>
    
    </html>

![70][]

[70]: /images/20210726/6a0c0dfad6ef41bfa06e12e5688a23b6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）

1 linear-gradient（线性渐变） 1.1按方向渐变语法： background: linear-gradient(direction, color

淩亂°似流年/ 2023年10月05日 11:05/ 0 赞/ 9 阅读

相关 canvas画布

canvas标签 <canvas></canvas> 接下来使用支持H5的浏览器打开该页面，将会看到如下内容： ![在这里插入图片描述][watermark

系统管理员/ 2023年08月17日 16:25/ 0 赞/ 127 阅读

相关 canvas-画布

概述 HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 \ 150；通过 JavaScript 可以在该区域上绘制图像

浅浅的花香味﹌/ 2023年06月16日 08:23/ 0 赞/ 23 阅读

相关 html一个矩形两种颜色渐变,html5画布渐变在4个角落

这样的事情没有直接的操作。在某些特殊情况下(即colorpicker)，您可以使用两个单独的渐变来逃避。如果你想要每个角落任意颜色，你必须以像素为单位执行它。换句话说，对每

快来打我*/ 2022年10月06日 10:50/ 0 赞/ 170 阅读

相关 CSS线性渐变，径向渐变

线性渐变： background-image: linear-gradient(to bottom,red 0px,yellow 100px); ![watermark

曾经终败给现在/ 2022年09月03日 13:12/ 0 赞/ 247 阅读

相关创建画布

在开发Web项目时，图片是前台页面不可缺少的组成部分，传统方式在页面中加入图片一般通过HTML语言中的<img>标签来实现；在PHP语言中为了提升页面的传输速率、便于对数据统

阳光穿透心脏的1/2处/ 2022年07月24日 07:03/ 0 赞/ 176 阅读

相关渐变

一、渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。 ![70][]

﹏ヽ暗。殇╰゛Y/ 2022年05月26日 13:22/ 0 赞/ 246 阅读

相关 canvas简单动画案例（圆圈闪烁渐变动画）

> canvas的第二篇博客，终于开始做动画了，不得不说，canvas是真的强，虽然写起来不是那么顺手，但是实现的东西真的让我很满意。实现效果： ![2019022309

傷城~/ 2022年03月17日 08:20/ 0 赞/ 925 阅读

相关圆圈循环操作

把如图所示的圆圈中，相隔一个数据的两个数（如图中的1和10,3和5,3和6，）称作是”一对数”，编写算法求出乘积最大的一对数，和乘积最小的一对数，输出格式如下： Max=?\

灰太狼/ 2021年12月13日 03:45/ 0 赞/ 258 阅读

相关画布____渐变圆圈

直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

我就是我/ 2021年09月15日 15:02/ 0 赞/ 349 阅读