search

Home >Web Front-end >JS Tutorial >Complete example of JavaScript+html5 canvas drawing gradient area_javascript skills

Complete example of JavaScript+html5 canvas drawing gradient area_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:17:551534browse

The example in this article describes the method of drawing gradient areas with JavaScript+html5 canvas. Share it with everyone for your reference, the details are as follows:

The screenshot of the running effect is as follows:

The specific code is as follows: 

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   #canvas {
    border:3px solid gray;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
 </body>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.rect(0, 0, 200, 200);
  ctx.closePath();
  var gradient = ctx.createLinearGradient(0, 0, 200, 200);
  gradient.addColorStop(0, "gray");
  gradient.addColorStop(0.5, "red");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient;
  ctx.fill();
 </script>
</html>

Readers who are interested in more content related to js special effects can check out the special topics of this site: "Summary of jQuery animation and special effects usage" and "Summary of common classic special effects of jQuery"

I hope this article will be helpful to everyone in JavaScript programming.

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：js implements delayed loading of web page images to improve web page opening speed_javascript skillsNext article：js implements delayed loading of web page images to improve web page opening speed_javascript skills

Related articles

See more