Drawing Gradients
Gradient is a very common visual image, which can bring visual comfort. In Canvas, the drawing API provides two native gradient methods, including linear gradient and radial gradient. Gradient, the use of step-by-step sampling algorithm in the color set, can be applied in the stroke style and fill style. Using gradient requires three steps: first, creating gradient objects; secondly, setting gradient colors and transitions; and finally assigning gradient objects to fill or stroke styles.
code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drawing Gradients</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//Creating Gradient Objects: Linear Gradient
var grd=context.createLinearGradient(0,0,300,0);
//Setting Gradient Colors and Ways
grd.addColorStop(0,"#f90");
grd.addColorStop(1,"#0f0");
//Set Fill Style to Linear Gradient Object
context.fillStyle=grd;
context.fillRect(0,0,300,80);
}
window.addEventListener("load",Draw,false);
function Draw2(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//Creating Gradient Objects: Radial Gradient
var grd=context.createLinearGradient(0,0,300,0);
//Setting Gradient Colors and Ways
grd.addColorStop(0,"#0f0");
grd.addColorStop(1,"#f90");
//Set Fill Style to Linear Gradient Object
context.fillStyle=grd;
context.beginPath();
context.arc(180,180,90,0,Math.PI*2,true);
context.fill();
}
window.addEventListener("load",Draw2,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">Your browser does not support it canvas</canvas>
<canvas id="canvas2" width="400" height="300">Your browser does not support it canvas</canvas>
</body>
</html>
Pattern
Patterns are abstract concepts and describe laws. In Canvas, a pattern is usually created for the mapped image, which is used for the edge-drawing and filling styles. The pattern-borders and background images can be drawn.
code implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pattern</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="../img/5.jpg";
img.onload=function(){
//Create a texture pattern and circle the tiled image
var ptrn=context.createPattern(img,'repeat');
context.fillStyle=ptrn;
context.fillRect(0,0,1000,2000);
}
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">Your browser does not support it canvas</canvas>
</body>
</html>Effect
Transformation
In the process of drawing an image, if a figure of a shape needs to be drawn many times, it obviously increases the complexity. The Canvas Drawing API provides a variety of transformation methods, and provides a convenient method for complex drawing operations. Common transformation methods include translation, scaling, rotation and deformation.
1. Moving transformation
Setting the whole coordinate system to a certain number of offsets, the rendered image will follow the offset. (By default, the top left corner (0, 0) is used as the origin)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drawing Gradients</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//Setting Moving Offset
context.translate(200,120);
//Draw a round face
ArcFace(context);
}
function ArcFace(context){
//Draw a circular border
context.beginPath();
context.arc(0,0,90,0,Math.PI*2,true);
context.lineWidth=5;
context.strokeStyle="#f90";
context.stroke();
//Draw a Facebook
context.beginPath();
context.moveTo(-30,-30);
context.lineTo(-30,-20);
context.moveTo(30,-30);
context.lineTo(30,-20);
context.moveTo(-20,30);
context.bezierCurveTo(-20,44,20,30,30,20);
context.strokeStyle="#000";
context.lineWidth=10;
context.lineCap="round";
context.stroke();
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">Your browser does not support it canvas</canvas>
</body>
</html>Effectiveness
2. Scaling transformation
Scaling transformation is to set a pair of scaling factors in the whole coordinate system, and the rendered image will be scaled accordingly.
code implementation
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//Setting Moving Offset
context.translate(200,120);
//Scale the image by setting different scaling factors in the horizontal and vertical directions
context.scale(0.6,0.4)
//Draw a round face
ArcFace(context);
}Effect
3. Rotation transformation
Setting an optional angle for the whole coordinate system, the rendered image will rotate accordingly.
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//Setting Moving Offset
context.translate(200,120);
//Rotate the image clockwise by 30 degrees
context.rotate(Math.PI/6);
//Scale the image by setting different scaling factors in the horizontal and vertical directions
context.scale(0.6,0.4)
//Draw a round face
ArcFace(context);
}Effect
