从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要为大家详细介绍了canvas绘制渐变矩形的方法,图文详解容易学习,配合代码阅读理解效果更佳,非常适合初学者入门,感兴趣的小伙伴们可以参考一下。
目前创新互联已为1000多家的企业提供了网站建设、域名、虚拟主机、绵阳服务器托管、企业网站设计、密云网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。举例1:用canvas绘制一个红色矩形,具体步骤如下:
第一步:用document.getElementById( )找到
第二步:用getContext("2d")创建 context 对象
第三步:fillStyle属性可以设置矩形颜色,本例将其设置为红色;fillRect(x,y,width,height) 方法可以绘制已填色的矩形,x表示矩形左上角的X轴坐标,y表示矩形左上角的Y轴坐标,width表示矩形的宽度,height表示矩形的高度
完整代码如下:
效果图:
举例2:用canvas绘制一个渐变矩形,代码如下所示:
createLinearGradient(x,y,x1,y1) 可以创建线性渐变,使用渐变时,必须使用两种或者两种以上的颜色
addColorStop()方法表示颜色停止,可以是0至1
用fillStyle设置矩形颜色,然后用fillRect(x,y,width,height)绘制矩形
效果如图所示:
以上就是canvas绘制渐变矩形的方法,代码详细清楚,如果在日常工作遇到这个问题,希望你能通过这篇文章解决问题。如果想了解更多相关内容,欢迎关注创新互联网站制作公司行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图