在网页上用代码绘制一个渐变边框的图形技巧

 时间:2024-10-12 04:58:19

1、思路。绘制一个渐变的矩形可以分解成两个部分,一个就是矩形边框的渐变效果,另外一个就是绘制矩形这个主体任务。

在网页上用代码绘制一个渐变边框的图形技巧

3、有了渐变这样的一个定义之后,我们再把它作用在图形上面就非常的简单了。ctx.strokeStyle=gradient;ctx.lineWidth=10;ctx.strokeRect(40,110,210,100);

在网页上用代码绘制一个渐变边框的图形技巧

5、用同样的办法,我们还可以用这个渐变的样式使用在文字上面。strokeText()这稍僚敉视个代码可以达成这样的一个功能。<script type="text/javascript">var c=document.getElementById("写字也行");var ctx=c.getContext("2d");ctx.font="60px bold";// Create gradientvar gradient=ctx.createLinearGradient(0,0,190,50);gradient.addColorStop("0","#6959CD");gradient.addColorStop("0.5","#68228B");gradient.addColorStop("1.0","#191970");// Fill with gradientctx.strokeStyle=gradient;ctx.strokeText("我在百度经验",20,80);</script>

在网页上用代码绘制一个渐变边框的图形技巧
  • 从《流浪地球》电影中能学到什么?
  • js时间代码大全
  • HTML页面进入和退出的特效
  • 怎样用python实现从一个列表筛选数?
  • Photoshop制作人脸碎片效果
  • 热门搜索
    汕尾旅游景点大全 河源旅游网 宣城旅游景点大全 广东有哪些旅游景点 乌镇旅游攻略一日游 河南旅游团 张家界旅游公司 安徽旅游资讯网 金孔雀旅游度假村 7天旅游攻略