Home > Article > Web Front-end > How to draw dynamic linear gradient using HTML5 Canvas

How to draw dynamic linear gradient using HTML5 Canvas

不言Original: 2018-12-03 13:43:424515browse

If you want to use HTML5 Canvas to draw a linear gradient, you need to use the createLinearGradient() method. Let’s take a look at the specific content below.

HTML5 canvas

createLinearGradient()

The parameters of createLinearGradient() are as follows.

createLinearGradient (X coordinate of the gradient start position, Y coordinate of the gradient start position, X coordinate of the gradient end position, Y coordinate of the gradient end position)

Let's look at a specific example

The code is as follows

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style>
    body {
      background: #C0C0C0;
    }  
</style>
  <script>
    function PageLoad() {
      var CanvasWidth = 1200;      
      var CanvasHeight = 480;      
      var canvas = document.getElementsByTagName(&#39;canvas&#39;)[0],
          ctx = null,
          grad = null,
          color = 255;      
      if (canvas.getContext(&#39;2d&#39;)) {
        ctx = canvas.getContext(&#39;2d&#39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, &#39;#000000&#39;);
        grad.addColorStop(1, &#39;#2869fd&#39;);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        canvas.addEventListener(&#39;mousemove&#39;, function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,
          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, &#39;#000000&#39;);
          grad.addColorStop(1, &#39;#2869fd&#39;);
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);
      }
    }  
</script>
</head>
<body onload="PageLoad();">
  <canvas width="1200" height="480"></canvas>
</body>
</html>

Explanation: The onload event of the

body tag executes the PageLoad() function when the page is displayed.
When the page is displayed, the following code in addition to the event listener will be processed.
Drawing on the canvas uses the getElementsByTagName() method to get the canvas object from the ID. Call the getContext() method on the canvas object to obtain the context of the canvas. Initialize the canvas by calling the clearRect() method.
Creating gradients is created by the createLinearGradient() method. If the creation is successful, the gradient object will be returned as the return value. The start color and end color of the gradient are set by the addColorStop() method of the gradient object.
Drawing a gradient on the canvas You can draw a gradient on the canvas by assigning the gradient object to the context's fillStyle and executing the fillRect() method.

   function PageLoad() {
      var CanvasWidth = 1200;
      var CanvasHeight = 480;
      var canvas = document.getElementsByTagName(&#39;canvas&#39;)[0],
          ctx = null,
          grad = null,
          color = 255;
      if (canvas.getContext(&#39;2d&#39;)) {
        ctx = canvas.getContext(&#39;2d&#39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, &#39;#000000&#39;);
        grad.addColorStop(1, &#39;#2869fd&#39;);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
      }
    }

If you move the mouse pointer in the canvas, the code of the following event listener will be executed.
Create a linear gradient from the mouse pointer coordinates to the lower right corner of the canvas and draw it on the canvas.

canvas.addEventListener(&#39;mousemove&#39;, function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,
          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, &#39;#000000&#39;);
          grad.addColorStop(1, &#39;#2869fd&#39;);
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);

Running results

Use a web browser to display the above HTML file. The screen shown below will be displayed, completing the gradient drawing.

HTML5 canvas

Move the mouse in the canvas. The gradient is drawn from the mouse position to the lower right corner.

How to draw dynamic linear gradient using HTML5 Canvas

When you move the mouse, the gradient will move with it

How to draw dynamic linear gradient using HTML5 Canvas

HTML5 canvas

The above is the detailed content of How to draw dynamic linear gradient using HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!

html5 html 指针对象事件 canvas

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How does HTML5 canvas realize the fade-in and fade-out effect of mosaic (code)Next article：How does HTML5 canvas realize the fade-in and fade-out effect of mosaic (code)

See more

How to draw dynamic linear gradient using HTML5 Canvas

Related articles