HTML5 canvas组件

最新推荐文章于 2024-09-08 22:17:51 发布

苦涩2020

最新推荐文章于 2024-09-08 22:17:51 发布

阅读量1.4k

点赞数 4

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

本文链接：https://blog.csdn.net/UserPython/article/details/107126267

版权

这篇博客详细介绍了HTML5 canvas的绘图操作，包括画笔宽度和颜色设置、绘制路径、闭合和填充路径、贝塞尔曲线、圆和圆弧的绘制、文字与图像处理等，是学习canvas绘图的基础教程。

摘要由CSDN通过智能技术生成

canvas简介

canvas标签是用来绘制图像的
canvas本身没有绘画的能力，仅仅是图形的容器，相当于一块画板
必须要使用脚本完成绘制：JS

canvas绘画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{
    border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定义画板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        // 2、获取画板
        var canvas = document.getElementById("canvas");

        ///3、铺上画纸或画布，获取绘画环境
        var cv = canvas.getContext("2d");

        // 4、开启一条路径或重置当前路径，相当于抬笔，表示准备开始画
        cv.beginPath();

        // 5、指定路径(画笔)起点: 画布.moveTo(X坐标，Y坐标);
        cv.moveTo(50, 50);

        // 6、指定路径(画笔)到达位置: 画布.lineTo(X坐标，Y坐标);
        cv.lineTo(350, 50);

        // 7、绘制当前路径(画笔)，默认为黑色
        cv.stroke();
    </script>
</body>
</html>

画笔宽度和颜色

canvas.lineWidth = 数值;：定义画笔宽度(粗细)，值为数值类型，单位为像素
canvas.strokeStyle = “颜色值”：定义画笔(路径)颜色

多个到达点及开启多条路径

canvas.lineTo(X坐标， Y坐标);：定义一个新到达点，然后从上一个点到该点画一条线条
canvas.beginPath();：开启一条路径，或重置当前路径；相当于抬笔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{
    border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定义画板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d");
        cv.beginPath();
        cv.lineWidth = 10;
        cv.strokeStyle = "red";
        cv.moveTo(20, 20);
        cv.lineTo(200, 100);
        cv.lineTo(380, 20);
        cv.stroke();
        // ------------------------------------------
        // 开始新的路径
        cv.beginPath();
        cv.lineWidth = 20;
        cv.strokeStyle = "green";
        cv.moveTo(20, 170);
        cv.lineTo(200, 250);
        cv.lineTo(380, 170);
        cv.stroke();
    </script>
</body>
</html>

闭合路径和填充路径

canvas.closePath();：闭合路径，从当前点到开始点的路径
canvas.fillStyle = “颜色值”;：定义填充颜色
canvas.fill();：填充当前路径，默认为黑色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{
   border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定义画板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d");
        cv.beginPath();
        cv.lineWidth = 10;
        cv.strokeStyle = "red";
        cv.moveTo(20, 20);
        cv.lineTo(200, 100);
        cv.lineTo(380, 20);

        // 不能指定路径到达起点来关闭路径，不是正常的关闭路径
        // cv.lineTo(20, 20);

        // 创建闭合路径：从当前点到开始点的路径
        cv.closePath();
        
        // 绘制当前路径
        cv.stroke();

        // 定义填充颜色
        cv.fillStyle = "orange";

        // 填充当前路径，默认为黑色
        cv.fill();
    </script>
</body>
</html>

绘制贝塞尔曲线

canvas.quadraticCurveto(cpx, cpy, x, y);：二次贝塞尔曲线，只有一个控制点
canvas.bezierCurveto(cpx1, cpy1, cpx2, cpy2, x, y);：三次贝塞尔曲线，有两个控制点
cpx，cpy：控制点
x，y：到达点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{
    border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定义画板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext(