利用canvas进行图的绘制

最新推荐文章于 2024-05-10 10:10:22 发布

唐十八_wei

最新推荐文章于 2024-05-10 10:10:22 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/shibaweijin/article/details/105766022

版权

利用canvas进行图片绘制得几个方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid red;
        }
        #myImage{
            display: none;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="700" height="500"></canvas>
<img src="images/icon.png" alt="" id="myImage" >
<script type="text/javascript">
    var myCanvas=document.getElementById("myCanvas");
    var myImage=document.getElementById("myImage");
    var context=myCanvas.getContext("2d");
    window.onload=function () {
        drawImage();
    }
//
//    function drawImage() {
//        //三个参数
//        //1，img对象，2，起点的X坐标，3，起点的y坐标
        context.drawImage(myImage,50,50)
//    }
//        function drawImage() {
    //        //五个参数
    //            //1，img对象，2，起点的X坐标，3，起点的y坐标
    //            //4，设置宽度，5设置高度
                context.drawImage(myImage,50,50,200,200)
    //        }
    function drawImage() {
        //九个个参数，截取图片的某部分，进行绘制
        //九个参数类似于精灵图
       //img对象
        //2，截取的起点X ，3截取的起点Y，4，截取的宽5，截取的高
        //6，绘制起点的X，7，绘制起点Y ，8，设置宽度，9设置高度
        context.drawImage(myImage,0,0,112,128,100,100,112,128)
    }
</script>
</body>
</html>