[learn Javascript and draw on canvas]

1. What language is JavaScript?

JavaScript is embedded in the browser (running a script)

2. Three ways to introduce JavaScript into the page

(1) Inline

Inline: written in the attribute of the tag
① Code snippet display:

<body>
    <!-- Inline -->
    <a href="javascript:alert('Network signal difference')">Baidu</a>
</body>

② Page display:

(2) Page embedded

Page embedding: embed js code in the page through tags
① Code snippet display:

<body>
   <button onclick="fun()">Sign in</button> 
   <script type="text/javascript">/*Text composed of javascript. This type attribute is usually added to prevent some browsers from being unrecognized*/
    function fun(){
        alert('Login failed')
        }
</script>
</body>

② Page display:

(3) External linked

a. Create a separate JS file: js
b. Use the < script SRC = "js filename" > < / script > tag in the page to convert the external js file link in

Advantages of external chain
1) It is convenient for later modification and maintenance
2) Reduce file volume and speed up page loading
Load speed

① Code snippet display:
html:

<head>
    <script src="../js/003.js"></script>
</head>
<body>
   <button onclick="fun()">Sign in</button> 
   <p id="pt" >Xi'an University of Posts and Telecommunications</p>
</body>

js:

function fun(){
    // alert('login failed ')
    var p1=document.getElementById('pt') //Gets the element whose id attribute value is pt
    var str=p1.innerHTML//innerHTML represents the content in the tag (i.e. the content in the start tag and end tag)
    alert(str)
    }

② Page display:

3.document object

A page is a document, through which any element in the page can be obtained

Get the tag through the id attribute of the tag: getElementById(id attribute value)

4. Variables

The amount by which the value will change during program operation

The format is as follows:
var variable name

5. Relevant knowledge.

A special area of a page for drawing

1. Create canvas
< canvas id = "canvas name" width = "width" height = "height" >
2. Get canvas
To control the canvas in JavaScript, first get the canvas. Use the getElementByld0 method to get the canvas object in the web page.
Basic syntax format: VAR CAS = document Getelementbyid ('canvas name ')
3. Prepare brush
After you have the canvas, you need to prepare a brush to start drawing. This brush is the context object. The context object, also known as the drawing environment, allows you to draw graphics on the canvas.
Basic syntax format: VAR pen = CAS getContext(‘2d’);
4. Draw graphics

6. Draw lines

  • The simplest line consists of three parts: initial position, line end and stroke.
  • In the plane (2d), the initial position can be represented by the coordinate axis of "x, y". In the canvas, starting from the top left corner "0,0", the x-axis increases to the right and the y-axis increases downward.

1. Method of drawing lines

(1) Initial position
When drawing graphics, we first need to determine where to place the "pen", and the position of the "pen" is the initial position
Set.

var cas = document.getElementByld('cas');
var context = cas.getContext(2d');
context.moveTo(100, 100);

(2) Connection endpoint
Line endpoint is used to define an endpoint and draw - lines from the endpoint to the initial position. Use in canvas
lineTo(x,y) method to define the connection endpoint.

Basic syntax format
context.lineTo(100,100);

(3) Stroke
A line can be drawn through the initial position and the end of the line, but the line cannot be seen. At this time, we need to add stroke to the line to make it visible. Use the stroke() method in the canvas to realize the visual effect of lines.

Basic syntax format
context.stroke();

2. Line style

(1) Width
Use the IineWidth attribute in the canvas to define the width of the line. The value of this attribute is a numerical value (without units),
Measured in pixels.

Basic syntax format
context.lineWidth='10';

(2) Stroke color
Use the trokestyle attribute in the canvas to define the stroke color of the line. The value of this attribute is hexadecimal color value or English color value.

context.strokeStyle=#oo';
context.strokeStyle='red";

(3) End shape
By default, the endpoint of the line is square. The shape of the endpoint can be changed through the lineCap attribute in the canvas.

Basic syntax format
lineCap = "attribute value"

Attribute valueDisplay effect
But (default)The default effect, no end points, shows straight lines and square edges
roundShow circular endpoints
squareShow square ends

The style is as follows:

3. Line path

(1) Reset path
In the same canvas, no matter how many connection endpoints we add, there can only be one path. If we want to start a new path
Path, you need to use the beginPath0 method. When beginpath appears (that is, the path starts again).
(2) Closed path
Closed path is to close the open path drawn by us. After the multi-point path is closed, it will form a specific shape. In the canvas, use the closePath0 method to close the path.
(3) Fill path
Fill the graph with the fill() method in the canvas.
(4) Draw circle
In the canvas, use the arc() method to draw circles or arcs.

Basic syntax format
arc(x,y,r, start angle, end angle, direction)

Explain in detail:

  • X and y: x and Y represent the coordinate position of the center of the circle on the x-axis and y-axis.
  • r: Shows the radius of a circle or arc, which is used to determine the size of the figure.
  • Start angle: indicates the position of the initial arc point. The arc point is represented by numerical value and "Math.PI" (PI, which can be understood as 180 degrees).
  • End angle: the position of the end arc point, and the setting method of the initial angle is the same.
  • Direction: divided into clockwise and counterclockwise.

Example 1:
① The code snippet is as follows:

<body>
    <canvas id="cans" width="300" height="300">Your browser does not support canvas label</canvas>
    <script>
        //1. Get canvas
        var cans=document.getElementById('cans')
        //2. Get brush
        var context =cans.getContext('2d')
        //3. Set start path
        context.beginPath()
        //4. Set the starting point
        context.moveTo(30,100)
        //5. Define the endpoint of the connection
        context.lineWidth='15' //Set line width
        context.lineTo(150,100)
        //6. Stroke
        context.strokeStyle='red'//Set line color
        context.stroke()
        
    </script>
</body>

② Page display:

Example 2:
① Code snippet display:

<script>
        //1. Get canvas
        var canvas = document.getElementById('cans')
        //2. Get the brush (configure the context of the canvas)
        var context = canvas.getContext('2d')
        //3. Set the starting point
        context.moveTo(20,100)
        //4. Set the width of the line
        context.lineWidth='15'
        context.lineCap='round'//Set end shape
        //5. Define the endpoint of the connection
        context.lineTo(200,100)

        //6. Set line color
        context.strokeStyle='red'
        //7. Stroke
        context.stroke()
    </script>

② Page display:

Example 3:
① The code snippet is as follows:

<body>
    <canvas id="cans" width="600" height="600">Your browser does not support canvas label</canvas>
    <script>
        var canvas=document.getElementById('cans')
        var context=canvas.getContext('2d')

        context.moveTo(100,100)//Set starting point
        context.lineTo(100,200)//Set endpoint
        context.lineTo(200,200)//Set endpoint
        context.closePath()//Close path
        //context.stroke() stroke
        context.fill()//Path filling
    </script>
</body>

② Page display:

Example 4:
① Code snippet display:

<body>
    <canvas id="cans" width="600" height="600">Your browser does not support canvas label</canvas>
    <script>
        var canvas =document.getElementById('cans')//Get canvas
        var ctx=canvas.getContext('2d')//Get brush
        ctx.beginPath()//Reset path
        //ctx. Arc (100100,80,0,0.5 * math.pi, false) draws a circle. One or two values represent the center of the circle,
        //The third value represents the radius, the fourth is the starting position, and the fifth value represents the end angle.
        //true means to draw a quarter arc counterclockwise and false means to draw a quarter arc clockwise
        ctx.arc(100,100,80,0,1*Math.PI,false)//Indicates that the lower arc is drawn clockwise
        ctx.closePath()  //Closed path
        ctx.stroke()//Stroke 
    </script>
</body>

② Page display:

Example 5: (smiling face drawing)
① Code snippet display:

<body>
    <canvas id="cans" width="600" height="600">Your browser does not support canvas label</canvas>
    <script>
        var canvas =document.getElementById('cans')//Get canvas
        var ctx=canvas.getContext('2d')//Get brush
       
        //Draw a face
        ctx.beginPath()//Reset path
        ctx.arc(100,100,80,0,2*Math.PI,true)
        ctx.closePath() //Closed path
        ctx.fillStyle='green'//Set fill color
        ctx.fill()//Fill path
        
        //Draw mouth
        ctx.beginPath()
        ctx.strokeStyle='#fff '/ / set the color of stroke (line)
        ctx.lineWidth='5'
        ctx.arc(100,120,25,0,1*Math.PI,false)
        ctx.stroke()//Stroke is OK. There is no need to close the path

        //Draw left eye
        ctx.beginPath()//Reset path
        ctx.strokeStyle="#fff "/ / brush color
        ctx.lineWidth='5'//stroke width 
        ctx.arc(70,80,20,0,1*Math.PI,true)
        ctx.stroke()//Stroke is OK. There is no need to close the path
        //Draw right eye
        ctx.beginPath()//Reset path
        ctx.strokeStyle="#fff "/ / brush color
        ctx.lineWidth='5'//stroke color 
        ctx.arc(130,80,20,0,1*Math.PI,true)
        ctx.stroke()//Stroke is OK. There is no need to close the path

    </script>

② Page display:
Example 6: (drawn by matchmaker)
① Code snippet display:

<body>
    <canvas id="cas" width="800" height="600">Your browser does not support canvas label</canvas>
    <script>
         var context = document.getElementById('cas').getContext('2d');
     //1. Draw the head
     context.arc(400,100,30,0,2*Math.PI);
     context.fillStyle='#ccc'
     context.fill()
     context.lineWidth='5'
     context.stroke()
     //2. Draw the neck
     context.beginPath()
     context.moveTo(400,130)
     context.lineTo(400,140)
     context.lineWidth='5'
     context.stroke()
     //3. Draw the torso
     context.beginPath()
     context.moveTo(400,140)
     context.lineTo(400,260)
     context.lineWidth='25'
     context.stroke()
     //4. Draw red briefcase
     context.beginPath()
     context.moveTo(360,200)
     context.lineTo(440,200)
     context.lineTo(440,250)
     context.lineTo(360,250)
     context.closePath()
     context.fillStyle='red'
     context.fill()
     context.lineWidth='2'
     context.stroke()
     //5. Draw the arm
     context.beginPath()
     context.moveTo(400,140)
     context.lineTo(440,200)
     context.lineTo(400,240)
     context.lineWidth='10'
     context.stroke()
     //5.1 drawing palm
     context.beginPath();
    context.arc(400,240,10,0,2*Math.PI);
    context.fillStyle = '#000';
    context.fill();
     //6. Draw the legs
     context.beginPath()
     context.moveTo(380,400)
     context.lineTo(400,260)
     context.moveTo(420,400)
     context.lineTo(400,240);
    context.lineWidth='10';
     context.stroke()
     //7. Draw the forefoot
     context.beginPath()
     context.arc(365,400,15,0,1*Math.PI,true)
     context.closePath()
     context.lineWidth='5';
     context.stroke()
     //8. Draw the rear foot
     context.beginPath()
     context.arc(405,400,15,0,1*Math.PI,true)
     context.closePath()
     context.lineWidth='5';
     context.stroke()
    </script>
</body>

② Page display:

Tags: Javascript Front-end html

Posted by saikiran on Tue, 03 May 2022 14:44:26 +0300