资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

canvas绘制渐变矩形的方法-创新互联

这篇文章主要为大家详细介绍了canvas绘制渐变矩形的方法,图文详解容易学习,配合代码阅读理解效果更佳,非常适合初学者入门,感兴趣的小伙伴们可以参考一下。

目前创新互联已为1000多家的企业提供了网站建设、域名、虚拟主机绵阳服务器托管、企业网站设计、密云网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

标签可以用来绘制图形,但是要通过JavaScript脚本来实现效果,因为标签只是一个装图形的容器,效果的实现要借助JavaScript脚本。我们可以用canvas绘制直线,圆形,矩形,字符等等。

举例1:用canvas绘制一个红色矩形,具体步骤如下:

第一步:用document.getElementById( )找到 元素

第二步:用getContext("2d")创建 context 对象

第三步:fillStyle属性可以设置矩形颜色,本例将其设置为红色;fillRect(x,y,width,height) 方法可以绘制已填色的矩形,x表示矩形左上角的X轴坐标,y表示矩形左上角的Y轴坐标,width表示矩形的宽度,height表示矩形的高度

完整代码如下:


  

效果图:

canvas绘制渐变矩形的方法

举例2:用canvas绘制一个渐变矩形,代码如下所示:


  

createLinearGradient(x,y,x1,y1) 可以创建线性渐变,使用渐变时,必须使用两种或者两种以上的颜色

addColorStop()方法表示颜色停止,可以是0至1

用fillStyle设置矩形颜色,然后用fillRect(x,y,width,height)绘制矩形

效果如图所示:

canvas绘制渐变矩形的方法

以上就是canvas绘制渐变矩形的方法,代码详细清楚,如果在日常工作遇到这个问题,希望你能通过这篇文章解决问题。如果想了解更多相关内容,欢迎关注创新互联网站制作公司行业资讯频道!


网站题目:canvas绘制渐变矩形的方法-创新互联
链接URL:http://cdkjz.cn/article/ddsihh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220