html5圆形渐变

╰+攻爆jí腚メ 2022-09-25 12:14 229阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
            <title></title>
        </head>
        <body>
            <h2>圆形渐变</h2>
            <canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
            <script> var canvas=document.getElementById('mc'); var ctx=canvas.getContext('2d'); ctx.save(); ctx.translate(30,20); lg=ctx.createRadialGradient(80,40,5,80,40,60); lg.addColorStop(0.2,"#f00"); lg.addColorStop(0.5,"#0f0"); lg.addColorStop(0.9,"#00f"); ctx.fillStyle=lg; ctx.fillRect(0,0,160,80); ctx.restore(); ctx.translate(280,160); ctx.beginPath(); ctx.arc(0,0,80,0,Math.PI*2,true); ctx.closePath(); ctx.lineWidth=12; lg2=ctx.createRadialGradient(0,0,5,0,0,80); lg2.addColorStop(0.1,"#ff0"); lg2.addColorStop(0.4,"#0ff"); lg2.addColorStop(0.8,"#f0f"); ctx.fillStyle=lg2; ctx.fill(); </script>
        </body>
    </html>

![这里写图片描述][20160908234546653]

[20160908234546653]: /images/20220717/78a7547e37404a81bb6c4d26f226958d.png

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML/CSS 圆形头像

HTML/CSS 圆形头像4 代码： <!DOCTYPE html> <html lang="en"> <head>

分手后的思念是犯贱/ 2023年01月01日 06:56/ 0 赞/ 298 阅读

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

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

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

相关 HTML径向效果,HTML5版径向渐变梯度色彩

![5268f80b9b1e01f982625ef6fac83ca1.png][] HTML5版径向渐变梯度色彩有个读者问我如何用HTML5生成一个径向梯度色彩效果，而不

布满荆棘的人生/ 2022年10月06日 07:56/ 0 赞/ 261 阅读

相关 html5添加渐变边框效果,用CSS实现模块边框的渐变

用CSS实现模块边框的渐变，一起来看下demo. float:left; margin:50px; width:250px; height:250px; box-si

傷城~/ 2022年10月06日 05:51/ 0 赞/ 320 阅读

相关 html5圆形渐变

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

╰+攻爆jí腚メ/ 2022年09月25日 12:14/ 0 赞/ 230 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 299 阅读

相关 html5＜canvas操作像素实例之渐变＞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

心已赠人/ 2022年06月15日 07:27/ 0 赞/ 309 阅读

相关【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图： ![1334153306_3907.png][]

喜欢ヅ旅行/ 2022年06月13日 11:30/ 0 赞/ 318 阅读

相关 HTML5 Canvas 开发绘图方法整理【十、Canvas渐变、图形渐变&&文字渐变】

基础渐变三部曲：语法： 1、创建渐变对象 ctx.createLinearGradient(x0,y0,x1,y1); x0,y0 渐变开始点坐标 x1,y

╰+哭是因爲堅強的太久メ/ 2022年05月31日 09:49/ 0 赞/ 379 阅读

相关 Canvas 圆形渐变

一介绍渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下是设置Canvas圆形渐变的方法： createRadialGradie

迈不过友情╰/ 2022年05月12日 00:38/ 0 赞/ 458 阅读