【原生javascript】canvas图片

最新推荐文章于 2024-08-07 05:09:36 发布

精灵福将马国成

最新推荐文章于 2024-08-07 05:09:36 发布

阅读量186

点赞数 2

本文链接：https://blog.csdn.net/weixin_42705570/article/details/87689517

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas {
             border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>绘制图片</p>

    <canvas width="600" height="400"></canvas>

    <script type="text/javascript">

        /*
        
        canvas绘图步骤
        1.先落笔，站到落笔点的坐标
        2.落笔，然后连线
        3.描边

         */

         //获取canves画布
        var canvas =document.querySelector("canvas");

         //获取绘图上下文
        var ctx=canvas.getContext("2d");
        // 获取绘图上下文
        var img = document.createElement("img");
        // 这里需要找一张图片
        img.src = "1.jpg";

        img.function(){
            var img_width = img.width;
            var img_height = img.height;

            var drowHeight = 200*img_height/img_width;

            ctx.drawImage(img,0,0,200,drowHeight);
        }

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