使用H5新增的canvas绘制图形

原创已于 2022-07-27 20:40:51 修改

· 355 阅读

0 ·

版权

文章标签：

#前端 #html #css

于 2022-07-25 16:08:18 首次发布

H5 专栏收录该内容

1 篇文章

订阅专栏

一、绘制文本

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html5css3 阶段</title>
    <style>
        canvas {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <canvas id="canvas">tips</canvas>

	<script src="./canvas-tool.js"></script>
    <script>
        var canvas = document.querySelector("#canvas");
        canvas.width = 600;
        canvas.height = 600;
        var ctx = canvas.getContext("2d");
        // console.log(ctx);
        // 定义坐标点
        var point = {
            x: 200,
            y: 200
        }
        // 横线X
        drawLine(
            ctx,
            point.x - 100,
            point.y,
            point.x + 100,
            point.y,
            "red"
        )
        // 竖线Y
        drawLine(
            ctx,
            point.x,
            point.y - 100,
            point.x,
            point.y + 100,
            "red"
        )

        // 定义文本
        var str = "hello world!";
        // 开始绘制路径
        ctx.beginPath()
        // 描边颜色
        ctx.strokeStyle = "#000";
        // 填充颜色
        ctx.fillStyle="green";
        // 设置字体(大小，名称)
        ctx.font = "50px 微软雅黑";//  Microsoft YaHei
        // 设置文本水平方向对齐(左中右) left center right
        ctx.textAlign = "center";
        // 设置文本垂直方向对齐（上中下）bottom middle top 
        ctx.textBaseline = "middle"
        // 描边文本
        ctx.strokeText(
            str,
            point.x,
            point.y)
        // 填充文本
        ctx.fillText(
            str,
            point.x,
            point.y)
        // 结束绘制
        ctx.closePath();


        // 绘制文本
        drawText(
            ctx,
            "窗外下大雨了",
            300,
            400,
            "red",
            100
        )
    </script>
</body>

</html>

canvas-tool.js

/*
*
* 
* 1. 绘制线    drawLine
* 2. 绘制矩形  drawRect
* 3. 绘制圆形  drawCircle
*
*/ 

// 编写函数实现不同的功能
// 功能1：
var drawLine = function(ctx,x1,y1,x2,y2,color,width) {
    // 默认变量值
    // 起点坐标
    // var x1 = x1 || 100;
    // var y1 = y1 || 100;
    var x1 = x1 === undefined ? 100 : x1;
    var y1 = y1 === undefined ? 100 : y1;

    // 终点坐标
    // var x2 = x2 || 500;
    // var y2 = y2 || 100;
    var x2 = x2 === undefined ? 500 : x2;
    var y2 = y2 === undefined ? 100 : y2;

    // 颜色
    var color = color || "#ccc";
    // 线大小
    var width = width || 1;
    // 绘制线
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.moveTo(x1,y1);

    ctx.lineTo(x2,y2);

    ctx.closePath();
    ctx.stroke();
}
// 功能2：
// ctx 是对象 
var drawRect = function(ctx,x,y,w,h,color){
    var x = x === undefined ? 100: x;
    var y = y === undefined ? 100: y;
    var w = w === undefined ? 100: w;
    var h = h === undefined ? 100: h;
    var color = color === undefined ? "red": color;
    // 绘制矩形
    ctx.beginPath();
    ctx.fillStyle = color;
    // 绘制矩形
    ctx.rect(x,y,w,h);
    ctx.closePath();
    // 填充（表现图形）
    ctx.fill();
}
// 功能3：
var drawCircle = function(ctx, x,y,r,s,e,color){
    var x = x === undefined ? 100: x;//坐标X
    var y = y === undefined ? 100: y;//坐标Y
    var r = r === undefined ? 100: r;//半径
    var s = s === undefined ? 0 : s; // 开始的角度
    var e = e === undefined ? 360 : e;// 结束的角度
    var color = color === undefined ? "red": color;//颜色
    // 绘制圆(弧形)
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(x,y);
    // 绘制弧形
    ctx.arc(
        x,
        y,
        r,
        s * Math.PI/180,
        e * Math.PI/180,
        false
    )
    ctx.closePath();
    ctx.fill();
}

二、绘制三角形

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制三角形</title>
    <style>
        canvas {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="canvas">tips</canvas>

    <script>
        // 获取canvas标签
        var canvas = document.querySelector("#canvas")
        // 设置canvas的大小（画布）
        canvas.width = 600;
        canvas.height = 600;
        // 获取canvas标签提供的绘制图形图像的对象
        var ctx = canvas.getContext("2d");

        // 定义数据
        var x1 = 100;
        var y1 = 100;

        var x2 = 300;
        var y2 = 200;

        var x3 = 100;
        var y3 = 400;

        // 开始绘制路径
        ctx.beginPath();

        // ctx 相当于画笔 
        // 设置线的宽
        ctx.lineWidth = 5;

        // 绘制线(描边的颜色)
        ctx.strokeStyle= "red";

        // 填充颜色
        ctx.fillStyle="red";

        // 设置起点
        ctx.moveTo(x1,y1);

        // 设置下一个坐标点
        ctx.lineTo(x2,y2);

        // 设置下一个坐标点
        ctx.lineTo(x3,y3);

        // 设置下一个坐标点
        // ctx.lineTo(x1,y1);

        // 结束绘制路径(闭合)
        ctx.closePath();

        // 调用描边方法
        ctx.stroke();
        // 调用填充方法
        ctx.fill();

      






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

三、绘制矩形

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制矩形</title>
    <style>
        canvas {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="canvas">tips</canvas>
    <script>
        var canvas = document.querySelector("#canvas");
        canvas.width = 600;
        canvas.height = 600;
        var ctx = canvas.getContext("2d");

        // 绘制矩形
        // 矩形相关的数据
        var x = 100;// 坐标
        var y = 100;
        var w = 200; // 尺寸
        var h = 100;

        // 设置属性
        ctx.fillStyle = "green";// 填充颜色
        ctx.strokeStyle = "red"; // 描边颜色
        ctx.lineWidth = 10; // 线宽

        // 调用方法(描边一个矩形)
        ctx.strokeRect(x,y,w,h);
        // 拆分写法
        // ctx.rect(x,y,w,h);
        // ctx.stroke();

        // 调用方法(填充一个矩形)
        ctx.fillRect(x,y,w,h);
        // 拆分写法
        // ctx.rect(x,y,w,h);
        // ctx.fill();
        



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

四、绘制弧形（圆形）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制弧形(圆形)</title>
    <style>
        canvas {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="canvas">tips</canvas>
    <!-- 
        弧度 = 角度 * Math.PI / 180 
     -->
    <script>
        var canvas = document.querySelector("#canvas");
        canvas.width = 600;
        canvas.height = 600;
        var ctx = canvas.getContext("2d");


        // 记录弧形的数据
        var x = 200;    //坐标
        var y = 200;
        var r = 100;    //半径
        var angle = 300; //角度
        var rad = angle * Math.PI / 180;// 计算弧度

        // 线颜色
        ctx.strokeStyle = "red";

        // 填充颜色
        ctx.fillStyle = "green";

        // 设置中心
        ctx.moveTo(x,y);
        
        // 绘制弧形
        // 参数
        // ctx.arc(x坐标,y坐标,r半径, 0开始弧度, rad结束弧度 , 布尔值); // false 顺时针
        ctx.arc(x,y,r,0,rad, false);

        // 闭合
        ctx.closePath();
        // 描边
        ctx.stroke();
        // 填充方法
        ctx.fill();


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