<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{

                margin: 0;

            }

            canvas{

                display: block;

                background: #c1c1c1;

                margin: 80px auto;

            }

            img{

                display: none;

            }

        </style>

    </head>

    <body>


        <img src="img/img.jpg" width='200';/>

        <canvas width="500" height="500" ></canvas>

        <script>

            οnlοad=function(){

             var oC = document.querySelector('canvas');

             var op = oC.getContext('2d');

             var oImg = document.querySelector('img');

             op.drawImage(oImg,100,0,100,100,200,0,100,100)

            }










        </script> 

    </body>

</html>canvas绘制图片_2d