canvas基本使用大全

今天也要加油ya

已于 2023-06-13 17:09:03 修改

阅读量114

点赞数

分类专栏： canvas 文章标签：前端 javascript html5

于 2023-06-13 15:30:46 首次发布

本文链接：https://blog.csdn.net/weixin_61597234/article/details/131189404

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<body>
    <!-- canvas标签 有两个属性 width  height  ：默认单位px (设置时不需要带单位)-->
    <canvas id="myCanvas" width="1000" height="800" style="border: 1px solid #ccc;"></canvas>

    <script>
        // 一.找到 <canvas> 元素:
        var myCanvas = document.getElementById("myCanvas");
        // 二.创建 context 对象：
        //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
        var ctx = myCanvas.getContext("2d");


        // 三、案例(备注：左上角为0，0)

        // 1.绘制并填充矩形
        //   fillRect(x, y, width, height)方法定义了矩形当前的填充方式。
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 100, 100);


        // 2.绘制线段
        //   moveTo(x,y) 定义线条开始坐标
        //   lineTo(x,y) 定义线条结束坐标
        //   stroke() 方法来绘制线条
        //   beginPath() 方法开始一条路径，或重置当前的路径
        ctx.beginPath();
        ctx.moveTo(0, 100);
        ctx.lineTo(100, 200);
        ctx.stroke();


        // 3.绘制文本
        //   fillText(text,x,y,maxWidth)
        //   save()保存当前环境的状态
        //   restore()返回之前保存过的路径状态和属性。
        ctx.save()
        ctx.fillStyle = "#ccc";
        ctx.font = "30px Arial";
        ctx.fillText("Hello World", 100, 50);
        ctx.restore();

        // 使用save组合后，可单独设置不同的效果，Hello World颜色为#ccc，而123颜色为#FF0000
        ctx.fillText("123", 300, 50);


        // 4.绘制曲线
        //   arcTo(x1，y1，x2，y2，r) 方法在画布上创建介于两个切线之间的弧/曲线
        //     x1	两切线交点的横坐标。
        //     y1	两切线交点的纵坐标。
        //     x2	第二条切线上一点的横坐标。
        //     y2	第二条切线上一点的纵坐标。
        //     r	弧的半径。
        ctx.beginPath();
        ctx.moveTo(20, 20);           // 创建起始点
        ctx.lineTo(100, 20);          // 创建水平线 
        ctx.arcTo(150, 20, 150, 70, 50); // 创建弧
        ctx.lineTo(150, 120);         // 创建垂直线
        ctx.stroke();                // 画出来



        // 5.绘制图像
        //   drawImage() 方法在画布上绘制图像、画布或视频， 也能够绘制图像的某些部分
        //   drawImage(img,x,y)：在画布上定位图像
        //   drawImage(img,x,y,width,height)：在画布上定位图像，并规定图像的宽度和高度
        //   drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：剪切图像，并在画布上定位被剪切的部分
        //     img	规定要使用的图像、画布或视频。	 
        //     sx	可选。开始剪切的 x 坐标位置。
        //     sy	可选。开始剪切的 y 坐标位置。
        //     swidth	可选。被剪切图像的宽度。
        //     sheight	可选。被剪切图像的高度。
        //     x	在画布上放置图像的 x 坐标位置。
        //     y	在画布上放置图像的 y 坐标位置。
        //     width	可选。要使用的图像的宽度（伸展或缩小图像）。
        //     height	可选。要使用的图像的高度（伸展或缩小图像）

        var img = new Image();
        img.src = "./1.webp";
        img.onload = function () {
            // 绘制图片
            ctx.drawImage(img, 400, 0);
            // 绘制指定大小的图
            ctx.drawImage(img, 0, 260, 200, 200);
            // 裁剪图像
            ctx.drawImage(img,0,360,200,300,0,600,200,300)
        };
    </script>
</body>