如何用HTML5中的canvas绘制渐变矩形

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

canvas是HTML5中新增的特性,它可以在浏览器上绘制出各种酷炫的效果,作为一个前端开发人员,你知道如何用canvas绘制图形吗?这篇文章就和大家讲讲如何用canvas绘制一个矩形及一个渐变色矩形,有一定的参考价值,感兴趣的朋友可以参考一下。

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

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

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

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

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

完整代码如下:

<body>   <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas> </body> <script type="text/javascript">     var c=document.getElementById("myCanvas");   var ctx=c.getContext("2d");   ctx.fillStyle="#FF0000";   ctx.fillRect(25,10,150,80); </script>

效果图:

如何用HTML5中的canvas绘制渐变矩形

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

<body>   <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas> </body> <script type="text/javascript">     var c=document.getElementById("myCanvas");   var ctx=c.getContext("2d");     // Create gradient   var grd=ctx.createLinearGradient(0,0,200,0);   grd.addColorStop(0,"orange");   grd.addColorStop(1,"red");     // Fill with gradient   ctx.fillStyle=grd;   ctx.fillRect(25,10,150,80); </script>

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

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

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

效果如图所示:

如何用HTML5中的canvas绘制渐变矩形

以上详细介绍了用canvas绘制矩形和渐变矩形的方法,比较简单,初学者可以自己动手尝试,看看自己能不能绘制出更好看的图形,希望这篇文章对你有所帮助!

更多相关教程请访问 Html5视频教程

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何用HTML5中的canvas绘制渐变矩形

发表评论

提供最优质的资源集合

立即查看 了解详情