html5 canvas元素渐变

最新推荐文章于 2023-12-06 13:13:17 发布

JRJ1637

最新推荐文章于 2023-12-06 13:13:17 发布

阅读量498

点赞数

分类专栏： html 文章标签： html5 canvas元素字体绘制

本文链接：https://blog.csdn.net/JRJ1637/article/details/53691670

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   <style type="text/css">
       canvas{background: #b8edc9;}
   </style>
   </head>
   <body>
       <canvas id="mycanvas" width="800" height="800">
           您的浏览器不支持
       </canvas>
       <script type="text/javascript">
           var canvans=document.getElementById('mycanvas');
           c=canvans.getContext('2d');
               //渐变1
//           g=c.createLinearGradient(50,50,400,100);//createLinearGradient创建渐变色（x1,y1,x2,y2）颜色渐变的起点和终点
//           g.addColorStop(0,"#000000");//（位置，”颜色“）0表示起点。。插入点。。1表示终点。
//           g.addColorStop(0.8,"red");
//           g.addColorStop(1,"#FFFFFF");
//           c.fillStyle=g;
//           c.fillRect(50,50,400,300)
               //渐变2
//           g=c.createRadialGradient(50,300,10,700,300,150);
//           g.addColorStop(0,"#000000");
//           g.addColorStop(0.8,"red");
//            c.fillStyle=g;
//            c.fillRect(50,50,600,450)


           //渐变3
           g=c.createRadialGradient(400,300,10,400,300,200);

g.addColorStop(0,"#000000");

g.addColorStop(0.8,"red");

           g.addColorStop(1,"#FFFFFF");
           c.fillStyle=g;
            c.arc(400,300,200,0,Math.PI*2);
            c.fill();
         </script>
   </body>
</html>

JRJ1637

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas元素渐变

canvas{background: #b8edc9;} 您的浏览器不支持 var canvans=document.getElementById('mycanvas'); c=canvans.getContext('2d')
复制链接

扫一扫

专栏目录