Canvas学习-图片操作

最新推荐文章于 2023-04-27 14:36:53 发布
如影随从
最新推荐文章于 2023-04-27 14:36:53 发布
阅读量224
点赞数
文章标签： html canvas js 图片操作
本文链接：https://blog.csdn.net/haitunxiaomo/article/details/105515450
版权
在Canvas中，我们不仅可以绘制各种形状的图形，还可以将图片导入到Canvas中进行各种操作，例如平铺、切割、像素处理等。
下面这整理的学习代码笔记
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片操作</title>
</head>
<body>
    <script>
        /**
        * drawImage()方法共有三种调用方式。
        *       （1）drawImage(image , dx , dy)。
        *       （2）drawImage(image , dx , dy , dw , dh)。
        *       （3）drawImage(image , sx , sy , sw , sh , dx , dy , dw , dh)。
        *
        */

        function $$(id){
            return document.getElementById(id);
        }
        window.onload = function(){
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");
            // var image = new Image();
            // image.src="./images/timg.jpg";
            // image.onload = function(){
            //     cxt.drawImage(image, 40,20,50,50 ,100,100,50,50);
            // }

            var img = $$("img");
            cxt.drawImage(img, 10,10,);

            cnv = $$("canvas1");
            cxt = cnv.getContext("2d");
            cxt.drawImage(img, 40,20,100,100);


            /**
            * drawImage(image , sx , sy , sw, sh , dx , dy , dw , dh)解释说明下
            *       参数sx、sy、sw、sh，表示源图像需要截取的范围。
            *       参数sx，表示源图片被截取部分的横坐标。
            *       参数sy，表示源图片被截取部分的纵坐标。
            *       参数sw，表示源图片被截取部分的宽度。
            *       参数sh，表示源图片被截取部分的高度。
            *
            *       （1）sx、sy、sw、sh这四个参数中的“s”指的是“source（源图片）”。
            *       （2）dx、dy、dw、dh这四个参数中的“d”指的是destination（目标图片）。
            */

            cnv = $$("canvas2");
            cxt = cnv.getContext("2d");
            cxt.drawImage(img, 40,20,100,100, 50,50,100,100);


            /**
            * 在Canvas中，我们可以使用createPattern()方法来定义图片的平铺方式。
            * 语法：
            *       var pattern=cxt.createPattern(image,type);
            *       cxt.fillStyle=pattern;
            *       cxt.fillRect();
            * type属性取值：
            *        属性值          说明
            *-------------------------------------------
            *       repeat          默认值，在水平方向和垂直方向同时平铺
            *       repeat-x        只在水平方向平铺
            *       repeat-y        只在垂直方向平铺
            *       no-repeat       只显示一次（不平铺）        
            */

            var img2 = $$("img2");
            cnv = $$("canvas3");
            cxt = cnv.getContext("2d");
            pattern = cxt.createPattern(img2, "repeat");
            cxt.fillStyle=pattern;
            cxt.fillRect(0,0,cnv.width,cnv.height);

            cnv = $$("canvas4");
            cxt = cnv.getContext("2d");
            pattern = cxt.createPattern(img2, "repeat-x");
            cxt.fillStyle=pattern;
            cxt.fillRect(0,0,cnv.width,cnv.height);

            cnv = $$("canvas5");
            cxt = cnv.getContext("2d");
            pattern = cxt.createPattern(img2, "repeat-y");
            cxt.fillStyle=pattern;
            cxt.fillRect(0,0,cnv.width,cnv.height);

            cnv = $$("canvas6");
            cxt = cnv.getContext("2d");
            pattern = cxt.createPattern(img2, "no-repeat");
            cxt.fillStyle=pattern;
            cxt.fillRect(0,0,cnv.width,cnv.height);

            cnv = $$("canvas7");
            cxt = cnv.getContext("2d");
            var bgCanvas = document.createElement("canvas");
            bgCanvas.width = 20;
            bgCanvas.height = 20;
            var bgCxt = bgCanvas.getContext("2d");
            bgCxt.beginPath();
            bgCxt.arc(10,10,10,0,360*Math.PI/180,true);
            bgCxt.closePath();
            bgCxt.fillStyle = "HotPink";
            bgCxt.fill();

            pattern = cxt.createPattern(bgCanvas, "repeat-x");
            cxt.fillStyle = pattern;
            cxt.fillRect(0,0,200,200);

            /**
            * 在Canvas中，我们可以使用clip()方法来切割Canvas中绘制的图片。
            * 语法：
            *       cxt.clip();
            * 想要使用clip()方法切割一张图片，一般需要以下三步:
            *       （1）绘制基本图形。
            *       （2）使用clip()方法。
            *       （3）绘制图片。
            *
            */

            //第一步：绘制基本图形，用来切割
            cnv = $$("canvas8");
            cxt = cnv.getContext("2d");
            cxt.beginPath();
            cxt.arc(70,70,50,0,360*Math.PI/180,true);
            cxt.closePath();
            cxt.stroke();
            //第二步：使用clip()方法，使得切割区域为上面绘制的图形
            cxt.clip();
            //第三步，绘制一张图片
            cxt.drawImage(img, 10,20);

            /**
            * 在Canvas中，图片还可以跟文字或图形进行巧妙地结合，从而实现一些特殊的效果。
            *
            *
            */
            cnv = $$("canvas9");
            cxt = cnv.getContext("2d");
            var text = "绿色学习网";
            cxt.font = "bold 22px 微软雅黑";
            pattern = cxt.createPattern(img, "repeat");
            cxt.fillStyle = pattern;
            cxt.fillText(text,10,20);

            cnv = $$("canvas10");
            cxt = cnv.getContext("2d");
            cxt.beginPath();
            cxt.arc(70,70,50,0,360*Math.PI/180,true);
            cxt.closePath();
            pattern = cxt.createPattern(img, "repeat");
            cxt.fillStyle = pattern;
            cxt.fill();

        }

        


    </script>
    <span>添加图片</span><br>
    <canvas id="canvas" width="500" height="500" style="border:1px dashed gray"></canvas>
    <canvas id="canvas1" width="200" height="200" style="border:1px dashed gray"></canvas>
    <canvas id="canvas2" width="200" height="200" style="border:1px dashed gray"></canvas>
    <br>
    <span>平铺图片</span><br>
    <canvas id="canvas3" width="200" height="200" style="border:1px dashed gray"></canvas>
    <canvas id="canvas4" width="200" height="200" style="border:1px dashed gray"></canvas>
    <canvas id="canvas5" width="200" height="200" style="border:1px dashed gray"></canvas>
    <canvas id="canvas6" width="200" height="200" style="border:1px dashed gray"></canvas>
    <canvas id="canvas7" width="200" height="200" style="border:1px dashed gray"></canvas>

    <canvas id="canvas8" width="200" height="200" style="border:1px dashed gray"></canvas>

    <canvas id="canvas9" width="200" height="200" style="border:1px dashed gray"></canvas>
    <canvas id="canvas10" width="200" height="200" style="border:1px dashed gray"></canvas>
    <img id="img" src="./images/timg.jpg" alt="" style="display: none;">
    <img id="img2" src="./images/ico_up.png" alt="" style="display: none;">
</body>
</html>
运行结果：