How to draw gradient rectangle with canvas in HTML5-HTML Tutorial-php.cn

How to draw gradient rectangle with canvas in HTML5

yulia

Release： 2018-10-19 17:44:45

Original

3143 people have browsed it

Canvas is a new feature in HTML5. It can draw various cool effects on the browser. As a front-end developer, do you know how to use canvas to draw graphics? This article will tell you how to use canvas to draw a rectangle and a gradient rectangle. It has certain reference value. Interested friends can refer to it.

The

Example 1: Use canvas to draw a red rectangle. The specific steps are as follows:

Step one: Use document.getElementById() to find the

Second step Step: Use getContext("2d") to create a context object

Step 3: The fillStyle attribute can set the color of the rectangle. In this example, it is set to red; the fillRect(x,y,width,height) method can be used to draw it. A filled rectangle, x represents the X-axis coordinate of the upper left corner of the rectangle, y represents the Y-axis coordinate of the upper left corner of the rectangle, width represents the width of the rectangle, and height represents the height of the rectangle

The complete code is as follows:

<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>

Copy after login

Rendering:

How to draw gradient rectangle with canvas in HTML5

##Example 2: Use canvas to draw a gradient rectangle, the code is as follows:

<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>

Copy after login

createLinearGradient(x,y, x1,y1) can create a linear gradient. When using gradient, you must use two or more colors.

addColorStop() method indicates color stop, which can be 0 to 1

Use fillStyle Set the color of the rectangle, and then use fillRect(x,y,width,height) to draw the rectangle

The effect is as shown in the figure:

How to draw gradient rectangle with canvas in HTML5

The above describes the use in detail The method of drawing rectangles and gradient rectangles on canvas is relatively simple. Beginners can try it by themselves to see if they can draw better-looking graphics. I hope this article will be helpful to you!

For more related tutorials, please visit

Html5 video tutorial

The above is the detailed content of How to draw gradient rectangle with canvas in HTML5. For more information, please follow other related articles on the PHP Chinese website!