Home > Article > Web Front-end > How to set shadow on canvas? How to set shadow on canvas

How to set shadow on canvas? How to set shadow on canvas

不言Original: 2018-09-17 13:43:295260browse

We know that we can use CSS to achieve shadow effects, but canvas in HTML5 can also be used to set shadow effects. Therefore, the following article will introduce to you how to use canvas to set shadow effects. Not much to say. Say, look directly at the content.

First of all, you need to know that when drawing in canvas, whether it is text, graphics, or images, whether it is stroke or fill, you can set shadows for them by setting the relevant properties of the context object.

Canvas creates a shadow effect using the following four properties:

shadowColor: The color of the shadow, its default value is completely transparent black. Therefore, if this property is not set to opaque, the shadow is invisible. This property can only be set to a string representing a color; gradients or patterns cannot be used. Using translucent shadows can produce very realistic shadow effects because the background can be seen through the shadow.

shadowOffsetX: The offset of the shadow on the X-axis, in pixels. The default value is 0, which places the shadow directly below the shape and is invisible. Greater than 0 shifts to the right, less than 0 shifts to the left. The larger the shadow offset, the larger the shadow produced, and the higher the drawn graphics will appear on the canvas.

shadowOffsetY: The offset of the shadow on the Y axis, in pixels. The default value is 0, which places the shadow directly below the shape and is invisible. If it is greater than 0, it will shift downward. If it is less than 0, it will shift upward. The larger the shadow offset, the larger the shadow produced, and the higher the drawn graphics will appear on the canvas.

shadowBlur: The blur value of the shadow. is a pixel-independent value used in the Gaussian blur equation to blur shadows. The default value is 0, which produces a clear shadow. The larger the value, the blurrier the shadow.

Note: According to the canvas specification, the browser will draw a shadow only when the following two conditions are met:

1. A non-fully transparent shadowColor is specified. Attribute values; among the three attributes

2, shadowOffsetX, shadowOffsetY, and shadowBlur, at least one attribute has a value other than 0.

Let’s take a look at the example code of the shadow effect implemented by canvas:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$(&#39;can&#39;);
        var cans = can.getContext(&#39;2d&#39;);
        cans.fillStyle = &#39;green&#39;;
        cans.shadowOffsetX = 5;
        cans.shadowOffsetY = 5;
        cans.shadowColor = &#39;#333&#39;;
        cans.shadowBlur = 10;
        cans.fillRect(200,300,400,200);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>

Canvas sets the shadow effect as follows:

How to set shadow on canvas? How to set shadow on canvas

This article ends here. For more usage of the canvas element, please refer to html5 Development Manual.

The above is the detailed content of How to set shadow on canvas? How to set shadow on canvas. For more information, please follow other related articles on the PHP Chinese website!

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：What new tags and attributes are added to HTML5? New tags and attributes added (summary)Next article：What new tags and attributes are added to HTML5? New tags and attributes added (summary)

See more

How to set shadow on canvas? How to set shadow on canvas

Related articles