<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>效果图：
举例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)绘制矩形
效果如图所示：
以上详细介绍了用canvas绘制矩形和渐变矩形的方法，比较简单，初学者可以自己动手尝试，看看自己能不能绘制出更好看的图形，希望这篇文章对你有所帮助！
更多相关教程请访问 Html5视频教程 总结
以上是内存溢出为你收集整理的如何用HTML5中的canvas绘制渐变矩形全部内容，希望文章能够帮你解决如何用HTML5中的canvas绘制渐变矩形所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）