canvas的基本使用

最新推荐文章于 2024-06-04 10:27:09 发布

keep-study

最新推荐文章于 2024-06-04 10:27:09 发布

阅读量448

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/u012830303/article/details/128676230

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<html>
<body>
<div style="width:500px;height:500px;margin:50px auto;">
    <canvas id="canvas_div" width="500px" height="500px"></canvas>
    <img id="scream" src="1.png" style="display:none;">
</div>
<script>

        const canvas = document.getElementById("canvas_div");
        const ctx = canvas.getContext('2d');

        /**
         * 绘制线段路径
         * 可绘制出自由图形
         **/
        //开始一条路径
        ctx.beginPath();
        //设置笔触颜色。路径默认为黑色
        ctx.strokeStyle = "red";
        //设置笔触宽度，默认为1px
        //颜色和宽度，必须在stroke方法之前调用，否则无法生效。
        ctx.lineWidth = 7;
        // 创建开始点
        ctx.moveTo(5, 5);
        // 创建下一个连接点坐标
        ctx.lineTo(100, 5);
        //创建上一个点，与指定点之间的弧形路径
        ctx.arcTo(150, 5, 150, 30, 30);
        ctx.lineTo(150, 100);
        ctx.arcTo(150, 120, 130, 120, 20);
        ctx.lineTo(60, 120);
        //绘制最后一个点和开始点之间的路径
        ctx.closePath();
        //将以上定义的路径绘制出来
        ctx.stroke();
        //指定填充颜色
        ctx.fillStyle = "green";
        //执行填充颜色
        ctx.fill();

        /**
         * 绘制指定形状的路径
         * rect()绘制矩形路径，arc()绘制圆形路径
         * 只要是路径绘制，都需要使用beginPath()和stroke()方法
         **/
        //beginPath()重置当前的路径
        //不使用该方法的话，路径会继承上一个路径的笔触颜色和宽度
        //同时，若修改笔触，且stroke执行后，会把之前的所有路径上，在绘制一遍当前设置的笔触的样式
        ctx.beginPath();
        ctx.strokeStyle = "#ccc";
        ctx.lineWidth = 3;
        ctx.rect(5, 100, 110, 110);
        ctx.stroke();


        /**
         * 绘制矩形形状 ，不需要使用路径绘制的开始和结束方法
         * fillRect 绘制一个默认填充颜色的矩形，会使用fillStyle填充，默认是黑色。无边框
         * strokeRect 绘制一个边框矩形，可设置边框颜色和宽度，默认黑丝。不支持填充颜色
         **/

        /**
         * 剪裁，使用clip()方法
         * --------------------------------
         * ------clip只支持对路径的剪裁------
         * --------------------------------
         **/
        ctx.save();
        ctx.clip();
        //剪裁后，绘制的图像和路径，只有在剪裁的路径内的部分会展示，超出的部分不展示
        //制作圆形头像就是使用该原理，先绘制圆形路径，让后让如图片，即可
        //如果想在剪裁区之外绘制图形，需要在clip之前使用save()方法，然后再clip之后使用restore()方法
        const img = new Image();
        img.src = '1.png';
        //在剪裁区内放入了一张图片，会看到超出剪裁区的图片，没有显示
        img.onload = function(){
            ctx.drawImage(img, 10, 105);
            //在剪裁区放入图片后，想在剪裁区外绘制一个矩形，首先使用了restore()方法，然后再绘制图形
            //我们发现restore()和strokeRect()方法都放在了img.onload的方法内，是为了等待图片加载完成之后，再执行
            //如果放在外面，在图片加载完成之前就执行了restore方法跳出了剪裁区，并绘制了矩形，最后图片才绘制出来，并且也没在剪裁区
            //但之后的代码我们都需要放在该方法内，如果之后多次插入图片，还要多次嵌套onload方法，以保证绘制的顺序，但导致代码不便于阅读
            ctx.restore();
            ctx.strokeRect(15, 90, 150, 90);

            //为了解决以上问题，我们可以把canvas的代码放在window.onload = function() {canvas代码}
            //然后把需要用到的图片放在body的img元素中，并隐藏这些元素
            //在drawImage前，使用 const img = document.getElementById("img元素id");建立图片对象
            //因为代码在window.onload之后执行，所以所有图片都已加载完成，不需要再使用img.onload等待图片加载完成，代码可以按顺序书写和执行

        };


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

keep-study

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
canvas的基本使用

剪裁后，绘制的图像和路径，只有在剪裁的路径内的部分会展示，超出的部分不展示制作圆形头像就是使用该原理，先绘制圆形路径，让后让如图片，即可如果想在剪裁区之外绘制图形，需要在clip之前使用save()方法，然后再clip之后使用restore()方法
复制链接

扫一扫

专栏目录