当前位置：网站首页>Common prototype methods of canvas and the application of drawing pictures

Common prototype methods of canvas and the application of drawing pictures

2022-07-28 09:23:00 【Juefang】

Drawing lines

Draw triangle

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvans" width="500" height="500"></canvas>
        <img src="./img_the_scream.jpg" alt="">
        <script>
        var canvans = document.querySelector("#canvans")// obtain canvans object 
        if (canvans.getContext) {
    		// Monitor whether the browser supports canvas
            var ctx = canvans.getContext('2d');// obtain 2D paint brush 
            // Draw a closed triangle 
            ctx.beginPath();// Grab the pen first 
            ctx.moveTo(100, 100);// The beginning of a path 
    	    ctx.lineTo(200, 50);// even 
    	    ctx.lineTo(200, 150);// even 
            ctx.closePath(); // Finally, the third side needs to be closed 
    	    ctx.stroke();// End painting 
        }
        </script>
    </body>
</html>

Note that every line drawing needs ctx.beginPath() Grab a pen , then ctx.stroke() Put the pen

Draw a circle

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvans" width="500" height="500"></canvas>
        <img src="./img_the_scream.jpg" alt="">
        <script>
        var canvans = document.querySelector("#canvans")// obtain canvans object 
        if (canvans.getContext) {
    		// Monitor whether the browser supports canvas
            var ctx = canvans.getContext('2d');// obtain 2D paint brush 
            // circular 
            ctx.beginPath();
            ctx.arc(300,300,50,0,2*Math.PI,true)
            ctx.stroke();
        }
        </script>
    </body>
</html>

Painting garden ：arc（）
Draw arc ：arc（）

Drawing pictures

demand ： Suppose there's a h5 Posters , But the QR code in the picture is dynamic , And generated at any time . This is where it comes in canvas Dynamic picture rendering technology .

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="canvans" width="500" height="500"></canvas>
        <img src="./img_the_scream.jpg" alt="">
        <script>
        var canvans = document.querySelector("#canvans")// obtain canvans object 
        if (canvans.getContext) {
    		// Monitor whether the browser supports canvas
            var ctx = canvans.getContext('2d');// obtain 2D paint brush 
            let img = document.querySelector('img')
            // Drawing pictures 
            img.onload = function(){
    
                ctx.drawImage(img,200,200)  
            }
        }
        </script>
    </body>
</html>
<!-- ctx.