Shulou(Shulou.com)06/01 Report--

This article mainly shows you "HTML5 Canvas tailoring clip how to use", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "HTML5 Canvas tailoring clip how to use" this article.

Cropping (that is, clip ()) is one of the rendering methods in the rendering context. Many people think that this is a concept of elimination, but in fact it is wrong. Although it looks like a clean-up in appearance, because the cut area is set by the drawing path, this is a separate display area.

In Canvas animation, animation outside the crop region is not affected, which is often encountered when dealing with images. There are some similar algorithms, such as dirty matrix algorithm and so on.

The clip () method establishes a new cut region by calculating all the subpaths. The unclosed subpaths are filled in a closed way in the filled area, but it does not affect the actual set of subpaths, and the new cut region will replace the current cut region. The cut area can be any outline shape that can be drawn. So, the clipping path is actually the drawing path, but this path is not used to draw.

Instead, it sets a dividing line between the display area and the occluded area. If you are familiar with Flash, this is a bit like a Flash mask.

Take a look at an example below. The code is as follows:

SetInterval (function () {

Var mycanvas = document.getElementById ('mycanvas')

Var ctx=mycanvas.getContext ('2d')

Ctx.fillRect (0d0500500); / / the size of the filling area is 500x500.

Ctx.save ()

Ctx.translate (250250); / / move the current coordinates to the (250250) location

Ctx.beginPath (); / / draw up the path

Ctx.arc / draw a circle with a radius of 200.

Ctx.clip (); / / crop the top circle

/ / add styling to a pair of cropping regions

Var linearGradient = ctx.createLinearGradient; / / set the starting point

LinearGradient.addColorStop (0,'# FF0000'); / / gradient 0

LinearGradient.addColorStop (1,'# 004080'); / / gradient 1

Ctx.fillStyle = linearGradient

Ctx.fillRect (- 250500500500); / / an important step in tailoring, as tanslate has already started above

/ / so it needs to be adjusted to-250.

For (var juni1witj)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.