麻烦老师检查，谢谢

来源：6-4 编程练习

qq_慕移动3101913

2020-03-02 15:56:43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas图片</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800px" height="800px">您的浏览器不支持canvas
    </canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext('2d');
        //在此处补充代码
        context.fillStyle = 'black';
        context.arc(400,400,200,0,Math.PI * 2, true);
        context.fill();

        var img = new Image();
        img.src = 'http://climg.mukewang.com/59859f4d00014f1503000100.jpg';

        img.onload = function(){
            context.drawImage(img, 250, 350, 300, 100);
        }

        //关于绘制图img图像的X,Y左边：
            //400,400是中心坐标，
            //把图片向上移动一半（50，图片总长度100）
            //把图片向左移动一半（150，图片总长度100）
                //所以：X：400-150=250     Y：400-50=350
    </script>
</body>
</html>

写回答

1回答