canvas 基础以及2048游戏实践

最新推荐文章于 2023-02-09 11:53:26 发布

甩头淡忘烦恼

最新推荐文章于 2023-02-09 11:53:26 发布

阅读量492

点赞数 2

文章标签： canvas game

本文链接：https://blog.csdn.net/qq_36571602/article/details/84311938

版权

canvas（画布）：顾名思义用来画画的容器
2048游戏

1. 点

context.moveTo(x,y)。这句代码的意思是移动画笔至(x,y)这个点（单位是px）。这里是以 canvas 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。

2. 线

起点：context.moveTo(x,y)：同点
终点：context.lineTo(x,y)。这句的意思是从上一笔的停止点绘制到(x,y)这里。这里我们只是定义了路径，而未真正开始绘制。折线继续 lineTo 就可以了。

3. 面

面其实就是把折线内容闭合就可以形成多边形了，因此只要在绘制后通过 closePath() 就可以将内容闭合了。下面是一个矩形的例子(里面包含了常用的一些属性)：

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

<head>
  <meta charset="UTF-8">
  <title>绘制矩形</title>
</head>

<body>
  <div id="canvas-warp">
    <canvas id="canvas" width=800 height="600" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
      你的浏览器居然不支持Canvas
    </canvas>
  </div>
  <script>
    window.onload = function () {
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      
      // 添加渐变线 （与PS的渐变线是一样的）
      const grd = context.createLinearGradient(400, 50, 400, 550);
      
      // 径向渐变 （两圆之间的渐变）
      // const grd = context.createRadialGradient(400, 300, 0, 400, 300, 250);
      
      // 填充纹理 repeat-x | -y | no-repeat
      // const pattern = context.createPattern(img,"repeat");

      //添加颜色断点
      grd.addColorStop(0, "#94e6ff");
      grd.addColorStop(0.5, "white");
      grd.addColorStop(1, "#94e6ff");

      context.beginPath();
      context.moveTo(150, 50);
      context.lineTo(650, 50);
      context.lineTo(650, 550);
      context.lineTo(150, 550);
      context.closePath();              // 闭合路径
      context.lineWidth = 2;            // 设置线宽
      context.strokeStyle = "black";    // 设置线色


      context.fillStyle = grd;          // 选择油漆桶的颜色 当然也可以是具体的纯色
      context.fill()                    // 绘制路径方法
      context.stroke();

    }
  </script>
</body>

</html>

4. 圆弧

标准圆弧：arc()
参数：(x, y, radius, startAngle,endAngle,anticlockwise)
前面三个参数，分别是圆心坐标与圆半径。
startAngle、endAngle 是弧度值，不是角度值。
anticlockwise：是否逆时针绘制默认false(顺时针)
复杂圆弧：arcTo()
参数：(x1,y1,x2,y2,radius)
两个切点家圆弧半径确定
二次贝塞尔曲线：quadraticCurveTo()
参数：(cpx,cpy,x,y)
这里经常配合 moveTo(x0, y0)给出起始切点 cpx, cpy 作为控制点
x, y 为结束点
这里有一个在线转换器
三次贝塞尔曲线：bezierCurveTo()
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
较二次曲线多了一个控制点,正常情况下二次已经足够了,三次能画出更加复杂的东西。
在线转换器

5.变换

平移变换 translate(x,y)
例如我想将位于（0，0）的矩形平移至（100，100）点。那么我只要在绘制矩形之前加上context.translate(100,100)
旋转变换 rotate(deg)
需要注意的是，旋转是以坐标系的原点（0，0）为圆心进行的顺时针旋转。所以，在使用rotate()之前，需要配合使用translate()平移坐标系，确定旋转的圆心。
缩放变换 scale(sx,sy)
注意：这个缩放是整体缩放包括了位置和线宽, 所以我们最好是把左上角位置为(0, 0)，不设置线宽。或者自己封装。
矩阵变换 transform(a,b,c,d,e,f)
以上变换都可以用矩阵变换去实现，
[a, c, e]
|b, d, f|
[0, 0, 1]

参数含义默认值
a 水平缩放 1
b 水平倾斜 0
c 垂直倾斜 0
d 垂直缩放 1
e 水平位移 0
f 垂直位移 0
默认值带入后其实就是一个单位矩阵
可以经过简单的矩阵换算得出以下结论
1. 使用context.transform (1,0,0,1,dx,dy)代替context.translate(dx,dy)
2. 使用context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy)
3. 使用context.transform(0,b,c,0,0,0)来实现倾斜效果(最实用)。
setTransform() 是重置并开始变换，相当于做了一次restore

参数	含义	默认值
a	水平缩放	1
b	水平倾斜	0
c	垂直倾斜	0
d	垂直缩放	1
e	水平位移	0
f	垂直位移	0

6.文本

文本渲染

其他

canvas 内容说多也不多，其他还有shadow相关以及 clip相关等API
最后附上游戏链接 2048游戏(ps:最近比较忙分值以及动效等会补上~ 个人觉得就2048而言操作div会更加简单哦)

甩头淡忘烦恼

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas 基础以及2048游戏实践

canvas（画布）：顾名思义用来画画的容器1. 点context.moveTo(x,y)。这句代码的意思是移动画笔至(x,y)这个点（单位是px）。这里是以 canvas 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。2. 线起点：context.moveTo(x,y)：同点终点：context.lineTo(x,y)。这句的意思是从上一笔的停止点...
复制链接

扫一扫