canvas中文字和图片的绘制

绘制文字

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var str="hello cyy";
        //文字大小
        ctx.font="50px sans-serif";
        //字符str
        //位置100,100
        ctx.filltext(str,100,100);
        ctx.stroketext(str,100,200);

    
    </script>
</body>
</html>

水平对齐方式：left center right

文字居中，textalign=”center”

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var str="hello cyy";
        //文字大小
        ctx.font="50px sans-serif";
        //文字水平居中
        ctx.textalign="center";
        //字符str 位置100,100
        ctx.filltext(str,100,100);
        ctx.stroketext(str,100,200);

    
    </script>
</body>
</html>

需要注意的是，设置的并不是到画布的水平居中，而是以接下来你自己设置的filltext或者stroketext中的坐标作为文字的中心

如果想要设置到画布的居中，就需要对应的坐标点设为画布中心点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var str="hello cyy";
        //文字大小
        ctx.font="50px sans-serif";
        //文字水平居中
        ctx.textalign="center";
        //字符str 在画布位置水平居中
        ctx.filltext(str,300,200);

    
    </script>
</body>
</html>

垂直对齐方式 top middle bottom

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var str="hello cyy";
        //文字大小
        ctx.font="50px sans-serif";
        //文字水平居中，以300位为水平中心
        ctx.textalign="center";
        //文字垂直居中 ，以0为垂直中心
        ctx.textbaseline="middle";
        //字符str 
        ctx.filltext(str,300,0);

    
    </script>
</body>
</html>

如果需要文字全部显示，就设置垂直为top

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var str="hello cyy";
        //文字大小
        ctx.font="50px sans-serif";
        //文字水平居中，以300位为水平中心
        ctx.textalign="center";
        //文字垂直居中 ，以0为垂直顶对齐
        ctx.textbaseline="top";
        //字符str 
        ctx.filltext(str,300,0);

    
    </script>
</body>
</html>

获取文本宽度

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        var str="hello cyy";
        //文字大小
        ctx.font="50px sans-serif";
        //文字水平居中，以300位为水平中心
        ctx.textalign="center";
        //文字垂直居中 ，以0为垂直顶对齐
        ctx.textbaseline="top";
        //字符str 
        ctx.filltext(str,300,0);
        //获取文本宽度
        var width=ctx.measuretext(str).width;
        console.log(width);

    
    </script>
</body>
</html>

遗憾的是，canvas并没有提供获取高度的接口，因此需要通过文字大小或者自己去调试来获得

图片的绘制

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/right.png";

        //绘制图片
        ctx.drawimage(img,0,0);

    
    </script>
</body>
</html>

打开以后发现并没有图片，这是因为图片的加载需要一定时间

因此绘制必须要在图片加载完成之后才能进行

使用onload函数来判定是否加载完成

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/right.png";

        //图片加载完成后
        img.onload=function(){
            //绘制图片
            ctx.drawimage(img,0,0);
        }
       
    
    </script>
</body>
</html>

给自己做一个头像，我又臭美了哈哈哈

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/cyy_small.png";

        //图片加载完成后
        img.onload=function(){
            //绘制图片
            ctx.drawimage(img,100,50);
        }
       
    
    </script>
</body>
</html>

设置图像尺寸

ctx.drawimage(img,100,50,width,height);

后面新增两个参数填写图片的宽高

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/cyy_small.png";

        //图片加载完成后
        img.onload=function(){
            //绘制图片
            //原图400,*600，缩放为200*300
            ctx.drawimage(img,100,50,200,300);
        }
       
    
    </script>
</body>
</html>

图片的裁剪，需要

ctx.drawimage(img，要裁剪的起始点坐标，要裁剪的宽高尺寸，绘制区域的起始点坐标，绘制区域的宽高尺寸);

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/cyy_small.png";

        //图片加载完成后
        img.onload=function(){
            //绘制图片
            //裁剪出原图的0,0到400,400位置
            //绘制到0,0到400,400位置
            //等于是不进行缩放的效果
            ctx.drawimage(img,0,0,400,300,0,0,400,300);
        }
       
    
    </script>
</body>
</html>

裁剪+缩放0.5倍+移动100,100的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/cyy_small.png";

        //图片加载完成后
        img.onload=function(){

　　　　　　//绘制图片
　　　　　　//从原图的0,0开始裁剪，宽高400,300
　　　　　　//从100,100开始绘制，宽高为200,150

ctx.drawimage(img,0,0,400,300,100,100,200,150);

        }
       
    
    </script>
</body>
</html>

图形画刷

首先是star.jpg长这样

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/star.jpg";

        //图片加载完成后
        img.onload=function(){
            //创建图形画刷，模式为repeat
            var pattern=ctx.createpattern(img,"repeat");
            ctx.fillstyle=pattern;

            //绘制矩形，使用画刷填充
            ctx.fillrect(0,0,canvas.width,canvas.height);
            
        }
       
    
    </script>
</body>
</html>

模式总共有四种：no-repeat repeat-x repeat-y repeat

no-repeat的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid #abcdef;background-color: #a9add2;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="600">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getelementbyid("canvas");
        var ctx=canvas.getcontext("2d");//上下文，绘图环境

        //加载图片
        var img=new image();
        img.src="img/star.jpg";

        //图片加载完成后
        img.onload=function(){
            //创建图形画刷，模式为repeat
            var pattern=ctx.createpattern(img,"no-repeat");
            ctx.fillstyle=pattern;

            //绘制矩形，使用画刷填充
            ctx.fillrect(0,0,canvas.width,canvas.height);
            
        }
       
    
    </script>
</body>
</html>

其他两个同理

黄山市民网：https://www.huangshanshimin.com/

相关文章