怎样用HTML5中的canvas绘制渐变矩形-百分百源码网

怎样用HTML5中的canvas绘制渐变矩形

发布时间：09/01 来源：未知浏览：关键词：

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>

结果图：

图片1.jpg

举例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)绘制矩形

结果如图所示：

图片2.jpg