Home > Web Front-end > H5 Tutorial > Html5 Canvas Preliminary Study Notes (9) - Gradient

Html5 Canvas Preliminary Study Notes (9) - Gradient

黄舟
Release: 2017-02-28 15:50:47
Original
1357 people have browsed it

This article continues to introduce the drawing effect of html5. Different from the previous introduction, the gradient introduced in this article is not a state value. It is the fillStyle introduced before. A value of . First let’s look at an example:


##The code is as follows :

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);
Copy after login

This is a linear gradient. First create a linear gradient through

createLinearGradient. The four parameters are the horizontal and vertical coordinates of the starting point and the horizontal and vertical coordinates of the end point, and then Add the color value to the two points, 0 of addColorStop is the starting point, 1 is the end point, the second parameter is the color, which can be rgb or rgba.

The previous one is a linear gradient, and there is an arc gradient. The effect is as follows:


##The code is as follows:

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);
Copy after login

createRadialGradient

The first three parameters are the horizontal and vertical coordinates of the center of the starting circle and the radius of the circle. The last three parameters are as follows: the center coordinates of the end point circle and the radius of the circle.


Use a circular gradient to draw a gradient starting from the center. The effect is as follows:


The code is as follows:

var gradient = context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);
Copy after login

The starting point and the end point are the center of the square, and the radius can be different create this effect.

The above is the content of Html5 Canvas Preliminary Study Notes (9) - Gradient. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template