HTML5 drawing note 4: working with graphics

Save and restore canvas state

save() saves the status of the current environment

restore() returns the previously saved path state and properties

<canvas id="myCanvas" width="400" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// Start drawing rectangle.
context.fillStyle="#ff00ff";
context.strokeStyle="blue";
context.fillRect(20,20,100,100);
context.strokeRect(20,20,100,100);
context.fill();
context.stroke();
// Saves the current canvas state.
context.save();
//Draw another rectangle.    
context.fillStyle="#ff0000";
context.strokeStyle="green";
context.fillRect(140,20,100,100);
context.strokeRect(140,20,100,100);
context.fill();
context.stroke();
// Restores the state of the first rectangle.
context.restore();
// Draw two rectangles.
context.fillRect(20,140,50,50);
context.strokeRect(80,140,50,50);
</script>

Clear drawing

<script type="text/javascript">
function clearMap(){
    context.clearRect(0,0,300,200);
}
</script>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200"></canvas><br>
<input name="" type="button"  value="Empty canvas" onClick="clearMap();">
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="#FF00FF";
context.beginPath();
context.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true);
context.stroke();
</script>

moving coordinates

The coordinate system of canvas

The Canvas API uses a two-dimensional coordinate system. The upper left corner of the canvas corresponds to the coordinate origin (0,0). The right and the down are X-axis and Y-axis respectively. The right of X-axis is positive, and the down of Y-axis is positive. The canvas is drawn in one pixel as a coordinate unit.

coordinate transformation

When drawing a drawing, if you need to rotate the drawing or deform the drawing, you can use the coordinate transformation of Canvas API to achieve these effects. There are three ways of coordinate transformation: translation, scaling and rotation.

  1. translation

translate() of Canvas API implements translation. The method is defined as follows:

ctx.translate(x,y);
  1. zoom

The scale() method of Canvas API can reduce or enlarge, which is defined as follows:

ctx.scale(x,y);
  1. rotate

The rotate() method of Canvas API can rotate the figure, which is defined as follows:

ctx.rotate(angle);

Coordinate transformation of drawing with path

It is more convenient to use coordinate transformation method to deform the basic shape of rectangle. The solution is to write a function to create a path, and then call the function during coordinate transformation.

Example

<script type="text/javascript">
function drawTop(ctx, fillStyle){ 
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(0, 0, 30, 0,Math.PI,true);
    ctx.closePath();
    ctx.fill();
} 
function drawGrip(ctx){ 
    ctx.save(); 
    ctx.fillStyle = "blue";
    ctx.fillRect(-1.5, 0, 1.5, 40);
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(-5, 40, 4, Math.PI,Math.PI*2,true);
    ctx.stroke();
    ctx.closePath();
    ctx.restore(); 
} 
</script>
<canvas id="myCanvas" width="700" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
// Note: all movements are based on this context.
ctx.translate(80,80);
for (var i=1;i<10;i++){
 ctx.save();
 ctx.translate(60*i, 0);
 drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
 drawGrip(ctx);
 ctx.restore();
}
</script>

Rotating coordinates

<script type="text/javascript">
function drawTop(ctx, fillStyle){
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(0,0,30,0,Math.PI,true);
    ctx.closePath();
    ctx.fill();
}
function drawGrip(ctx){
    ctx.save(); 
    ctx.fillStyle = "blue";
    ctx.fillRect(-1.5, 0, 1.5, 40);
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(-5, 40, 4, Math.PI,Math.PI*2,true);
    ctx.stroke();
    ctx.closePath();
    ctx.restore(); 
}
</script>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(150,150);
for (var i=1;i<9;i++){
 ctx.save();
 ctx.rotate(Math.PI*(2/4+i/4));
 ctx.translate(0,-100);
 drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
 drawGrip(ctx);
 ctx.restore();
}
</script>

Zoom graphics

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(200,20);
for (var i=1;i<80;i++){
 ctx.save();
 ctx.translate(30,30);
 ctx.scale(0.95,0.95);
 ctx.rotate(Math.PI/12);
 ctx.beginPath();
 ctx.fillStyle="red";
 ctx.globalAlpha="0.4";
 ctx.arc(0,0,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
}
</script>

Transformation matrix

Matrix transformation can realize more complex graphic transformation than coordinate transformation.

Using the transform() method to realize the graph transformation

Use the transform() method of the drawing context object to modify the transform matrix, as defined below.

ctx.transform(a,b,c,d,dx,dy)

Parameter Description:

  • a. The b, c, d parameters are used to specify how to deform

  • The dx, dy parameter is used to move the coordinate origin.

  • a and d represent the times of horizontal rotation (scaling) and vertical rotation or (scaling), respectively. The default value is 1;

  • b and c represent the amount of horizontal tilt and vertical tilt respectively, with values from - 1 to 1;

  • dx and dy represent the distance between the horizontal and vertical displacement of the coordinate origin, and the unit is pixel by default.

Using setTransform() method to realize graph transformation

The setTransform() method is used to reset the transform matrix. This method is defined as follows.

context.setTransform (a,b,c,d,x,y)

Example

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(200,20);
for (var i=1;i<90;i++){
 ctx.save();
 ctx.transform(0.95,0,0,0.95,30,30);
 ctx.rotate(Math.PI/12);
 ctx.beginPath();
 ctx.fillStyle="red";
 ctx.globalAlpha="0.4";
 ctx.arc(0,0,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
}
ctx.setTransform(1,0,0,1,10,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,50,50);
ctx.fill();
</script>

Composite graphics

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="red";
context.fillRect(50,25,100,100);
context.fillStyle="green";
context.globalCompositeOperation="source-over";
context.beginPath();
context.arc(150,125,50,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="red";
context.fillRect(50,25,100,100);
context.fillStyle="green";
context.globalCompositeOperation="source-over";
context.globalAlpha=0.5;
context.beginPath();
context.arc(150,125,50,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>

clipping path

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
// Draw the background.
ctx.fillStyle="black";
ctx.fillRect(0,0,300,300);
ctx.fill();
// Draw a circle.
ctx.beginPath();
ctx.arc(150,150,130,0,Math.PI*2,true);
// Cut path.
ctx.clip();
ctx.translate(200,20);
for (var i=1;i<90;i++){
 ctx.save();
 ctx.transform(0.95,0,0,0.95,30,30);
 ctx.rotate(Math.PI/12);
 ctx.beginPath();
 ctx.fillStyle="red";
 ctx.globalAlpha="0.4";
 ctx.arc(0,0,50,0,Math.PI*2,true);
 ctx.closePath();
 ctx.fill();
   }
</script>

96 original articles published, 25 praised, 30000 visitors+
Private letter follow

Tags: Javascript

Posted on Sun, 02 Feb 2020 01:17:46 -0800 by svguerin3