canvas

原创

已于 2023-08-25 15:11:18 修改 · 902 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2023-08-25 14:55:42 首次发布

文章目录

canvas游戏设计

canvas游戏设计

1.canvas基础知识

1.1canvas元素

canvas元素我们称之为画布，之所以称之为画布就像我们的白板一样，或者黑板一样，我们它只是一个容器，我们需要绘制的图形图像都需要绘制在这个黑板上，那其实我们知道canvas不光可以用来去绘制基本的图形或者图图案，同样我们也可以拿它去实现游戏。
我们之所以不使用flash来完成游戏。是因为flash中。想要去运行，我们必须得要有对应的flash插件。没有对应的flash插件，我们没有办法在浏览器当中去运行我们要的游戏。而canvas对于我们来讲有个很方便的地方。就是他只是一个标签，只要你的浏览器支持canvas标签。我们就可以利用相关的代码来去完成一个游戏，或者图形回执。所以他是没有平台限制的并且也不需要我们去下载对应的插件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="can"></canvas>
    </body>
    </html>

1. canvas 默认的宽高，300 X 150
1. 给 canvas 元素设置宽高的时候，建议大家使用 canvas 标签本身提供的 width 和 height 属性。不建议大家使用 CSS 的样式设置，会导致 canvas 原本绘制的图片图形拉伸，变形。
1. 如果浏览器不支持 canvas 标签，我们可以将提示的错误信息放在 canvas 标签的中间内容中

    // 1.获取canvas元素
    var can = document.getElementById('can');
    // 通过canvas提供给我们的 绘图环境(绘图上线文) 绘制相关的 图形或图案
    var ctx=can.getContext('2d');
    // 3.获取到用于绘制图形图案的 相关api

1.2canvas 的绘图环境

CanvasRenderingContext2D 对象提供的属性

属性	描述
canvas	绘图环境所属的 canvas 对象。
fillStyle	绘图环境在后续的图形填充操作中所使用的的颜色，渐变色或者图案
font	用来设置字形
lineCap	绘制的线段的端点的样式，butt，round，square
lineWidth	绘制的线条的宽度
shadowColor	用什么颜色绘制阴影
shadowOffsetX	水平方向的偏移
shadowOffsetY	垂直方向的偏移
strokeStyle	绘图环境在后续的图形描边操作中所使用的的颜色，渐变色或者图案
textAlign	本文的对齐方式
textBaseline	垂直的堆砌方式

1.3 直线

对画直线的功能，我们可以使用beginPath(),closePath(),moveTo(),lineTo()和stroke()几个方法组合起来。

1.3.1 画直线

    // 获取对应的canvas 节点
    var can=document.getElementById('canvas');
    // 获取2d绘图环境
    var ctx=can.getContext('2d');
    // 开始一段新的路径
    ctx.beginPath();
    // 将笔触移动到某一点。
    ctx.moveTo(100,100);
    ctx.lineTo(200,200);
    // 绘制直线
    ctx.stroke();

beginPath() 定义一个新的路径绘制动作的开始
moveTo() 为固定点创建一个新的子路径，新的笔触点。
lineTo() 以上下文点为起点,到方法参数中指定的点之间画一条直线
stroke() 为所花的先赋予颜色等样式，并使其可见。如果没有特别指定颜色的话，则默认使用黑色。

1.3.2 直线的宽度

直线的宽度用lineWidth属性设定。

    ctx.lineWidth=5;  //默认的按像素单位。

1.3.3 线条颜色

直线的颜色用strokeStyle属性

    ctx.strokeStyle='red'; 
    ctx.strokeStyle='rgba(0,0,0)'; 
    ctx.strokeStyle='#f00';

1.3.4 直线端点的样式

canvas支持3中直线的端点样式：butt,round,square. 使用lineCap属性设定。

    ctx.lineCap="butt";
    ctx.lineCap="round";
    ctx.lineCap="square";

    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    // butt  黄色  10
    ctx.beginPath();
    ctx.strokeStyle='yellow';
    ctx.lineWidth=10;
    ctx.lineCap='butt';
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.stroke();
    // round  蓝色  20

    ctx.beginPath();
    ctx.strokeStyle='blue';
    ctx.lineWidth=20;
    ctx.lineCap='round';
    ctx.moveTo(100,130);
    ctx.lineTo(300,130);
    ctx.stroke();
    // square  红色  13

    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.lineWidth=15;
    ctx.lineCap='square';
    ctx.moveTo(100,160);
    ctx.lineTo(300,160);
    ctx.stroke();

1.4圆弧

1.4.1画弧线

画弧线的方法是arc().每一条弧线都要由中心点，半径，起始角度(弧度制—弧度=角度值 * Math.PI/180)，结束角度(弧度制—弧度=角度值 * Math.PI/180)，后台绘图方向这几个参数来去确定一条弧线

    ctx.arc(x, y, radius, startAngle, endAngle, direction);
    // direction 用来设置圆弧的绘制方向
    // 默认  false  顺时针绘制
    //      true  逆时针绘制

另外，也可以用 arcTo()方法来画弧线，用来在路径中绘制圆角。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
        canvas {
     
     
            border: 3px solid red;
        }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.arc(300, 300, 150, (90 * Math.PI) / 180, (270 * Math.PI) / 180);
        ctx.stroke();
    </script>
    </html>

1.4.2二次曲线(二次贝塞尔曲线)

通过 quadraticCurveTo()来完成二次曲线的绘制，每一条二次曲线要求要有上下文点，一个控制点和一个终止点来去定义。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
        canvas {
     
     
            border: 3px solid red;
        }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.moveTo(100,100);
        //二次曲线的起点
        ctx.quadraticCurveTo(288,0,388,150);
        // arg1   控制点的x坐标
        // arg2   控制点的y坐标
        // arg3  结束点的x坐标
        // arg4  结束点的y坐标

        ctx.stroke();
    </script>
    </html>

1.4.3贝塞尔曲线

使用bezierCurveTo(); 每一条贝塞尔曲线需要由起点，两个控制点和一个终止点来确定。由于贝塞尔曲线的是有两个控制点的，因此贝塞尔曲线可以比二次曲线更加复杂

    ctx.bezierCurveTo(control1X,control1Y,control2X,control2Y,endx,endy);

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            canvas {
     
     
                border: 3px solid red;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.fillStyle="red";
        ctx.moveTo(100,300);
        ctx.bezierCurveTo(0,0,600,0,400,300);
        ctx.lineTo(400,300);
        ctx.arc(400,400,150,0,1.3*Math.PI);
        // ctx.stroke();
        ctx.fill();
    </script>

    </html>

1.4.4线条的链接样式

HTML5 canvas 中支持3种线条的链接样式；包括：miter，round和bevel，设定链接样式使用lineJoin属性，默认情况下使用miter样式

    ctx.lineJion='round';

注意：如果线条比较细他们之间链接并不形成很尖锐的角度的话，那么不同的样式可能会比较难以区分

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            canvas {
     
     
                border: 3px solid red;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        // 设置线条的宽度
        ctx.lineWidth = 30;
        // miter样式
        ctx.beginPath();
        ctx.moveTo(100, 150);
        ctx.lineTo(150, 50);
        ctx.lineTo(200, 150);
        ctx.lineJoin = "miter";
        ctx.stroke();
        // round样式
        ctx.beginPath();
        ctx.moveTo(240, 150);
        ctx.lineTo(290, 50);
        ctx.lineTo(340, 150);
        ctx.lineJoin = "round";
        ctx.stroke();

        // bevel样式
        ctx.beginPath();
        ctx.moveTo(380, 150);
        ctx.lineTo(430, 50);
        ctx.lineTo(480, 150);
        ctx.lineJoin = "bevel";
        ctx.stroke();
    </script>

    </html>

1.4.5圆角

画圆角使用arcTo()方法，这个方法需要一个控制点，一个终止点，半径作为必要参数

    ctx.arcTo(controlX, controlY, endX, endY, radius);

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            canvas {
     
     
                border: 3px solid red;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        //  设置矩形相关的参数
        var rectWidth=200;
        var rectHeight=100;
        var rectX=200;
        var rectY=50;
        var radius=50;
        
        ctx.beginPath();
        ctx.moveTo(rectX,rectY);
        ctx.lineTo