当前位置：网站首页>canvas常用原型方法及绘制图片应用

canvas常用原型方法及绘制图片应用

2022-07-28 08:35:00 【绝坊】

绘制线路

绘制三角形

<!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")//获取canvans对象
        if (canvans.getContext) {
    		//监测浏览器是否支持canvas
            var ctx = canvans.getContext('2d');//获取2D画笔
            //绘制封闭三角形
            ctx.beginPath();//先抓起笔
            ctx.moveTo(100, 100);//一条路径的开始
    	    ctx.lineTo(200, 50);//连
    	    ctx.lineTo(200, 150);//连
            ctx.closePath(); //最终第三条边需要闭合
    	    ctx.stroke();//结束绘画
        }
        </script>
    </body>
</html>

注意每次线条绘画都需要ctx.beginPath()抓笔，然后ctx.stroke()放笔

绘制圆形

<!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")//获取canvans对象
        if (canvans.getContext) {
    		//监测浏览器是否支持canvas
            var ctx = canvans.getContext('2d');//获取2D画笔
            //圆形
            ctx.beginPath();
            ctx.arc(300,300,50,0,2*Math.PI,true)
            ctx.stroke();
        }
        </script>
    </body>
</html>

画园：arc（）
画弧线：arc（）

绘制图片

需求：假设现在有一个h5海报宣传，但是图片中的二维码是动态的，并且随时生成的。这个时候就要用到canvas的动态图片绘制技术。

<!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")//获取canvans对象
        if (canvans.getContext) {
    		//监测浏览器是否支持canvas
            var ctx = canvans.getContext('2d');//获取2D画笔
            let img = document.querySelector('img')
            //绘制图片
            img.onload = function(){
    
                ctx.drawImage(img,200,200)  
            }
        }
        </script>
    </body>
</html>
<!-- ctx.