Comment: Before doing the rotation operation, you must understand one sentence: the rotation is the coordinate system of the canvas rather than the figure itself. First, let’s understand the coordinates of the circle: the center, the starting angle, the end angle; the next one is very simple
Before doing the rotation operation, you must understand one sentence: the coordinate system of the canvas is rotated rather than the figure itself. Okay, after understanding this sentence, the next thing is very simple.First, let’s understand the coordinates of the circle:
<script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,false);/*Draw a semicircular arc with the center coordinate of 100,100; the start radian is 0.75, the end radian is 1.75, the last parameter False = clockwise, true = counterclockwise, of course, this parameter is optional*/
cxt.fillStyle="#F00";/*Select the color to use*/
cxt.fill();/*One step to really draw the figure on the canvas, draw the first semicircle*/
/*Prefer to drawing the second semicircle*/
cxt.beginPath();
cxt.arc(170,100,50,Math.PI*1.25,Math.PI*0.25,false);
cxt.fillStyle="#F00";
cxt.fill();/*Draw the drawn graphics on the canvas*/
cxt.beginPath();
/*Rotate the canvas clockwise by 45 degrees. The parameter of the rotate function is radians, so you need to convert it */
cxt.rotate(45*Math.PI/180);
cxt.fillRect(141.1,-50,100,100);/*The starting coordinate is 141.1, -50, and the width and height are 100*/
cxt.fillStyle="#F00";
cxt.fill();
cxt.beginPath();
/*Rotate the canvas to a normal angle*/
cxt.rotate(-45*Math.PI/180);
cxt.font="60px Microsoft Yahei";
cxt.strokeStyle="#f00";
cxt.strokeText("I love html5", 0,300);/*Two parameters, the first is to start drawing the x-axis coordinates of the text, and the second is to start drawing the Y-coordinate of the text*/
cxt.stroke();
/*Create gradient*/
var grd=cxt.createLinearGradient(0,45,175,50);/*The four parameters are the gradient start point x, y gradient end point x, y*/
grd.addColorStop(0,"#FF0000");
grd.addColorStop(0.25,"#FFFF00");
grd.addColorStop(0.5,"#00FF00");
grd.addColorStop(0.75,"#00FFFF");
grd.addColorStop(1,"#FFFF00");
cxt.strokeStyle=grd;
cxt.strokeText("I love canvas",0,400);/*Two parameters, the first is to start drawing the x-axis coordinates of the text, and the second is to start drawing the Y-coordinate of the text*/
cxt.stroke();
</script>
Reproduction image: