前端canvas制作微信小游戏（一）

最新推荐文章于 2025-07-15 10:49:50 发布

Michael18811380328

最新推荐文章于 2025-07-15 10:49:50 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML web前端文章标签： canvas HTML5 前端小游戏 JS

本文链接：https://blog.youkuaiyun.com/weixin_41697143/article/details/80761062

JavaScript 同时被 3 个专栏收录

134 篇文章

订阅专栏

web前端

66 篇文章

订阅专栏

HTML

24 篇文章

订阅专栏

本文介绍HTML5中Canvas标签的基本用法，包括创建矢量图形、动画效果及使用JavaScript进行图形操作的方法。通过实例演示了如何绘制矩形、设置线条样式，并探讨了与CSS设计的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas是HTML5中新加入的标签。使用canvas可以创造完全独立于css的图形界面。canvas完全依靠js代码实现矢量图形界面的显示和变换。目前canvas在移动端界面中广泛使用。微信小游戏和小程序很多都是基于canvas进行创作（例如经典的最强弹一弹、经典跳一跳）这些小游戏不需要下载APP，直接在微信平台中运行即可进行游戏，受到不少用户的追捧。

下面是一个元宵节祝福的 demo 和详细说明

下面这个是使用canvas制作的元宵节祝福，节假日期间受到很多朋友追捧。

使用canvas制作和使用CSS进行设计不完全一致。传统CSS可以设置图片的样式（排版），就是将设计组已经设计好的图形进行处理，对文字、图片等属性进行加工。使用canvas可以完全创造矢量图形（点、线段、多边形等），结合JS的 setTimeout 等方法可以创造动画等效果。使用canvas操作的门槛相对高一些。

目前大部分使用canvas的2d效果，3d效果使用不常见。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
      canvas {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 预设代码:canvas的宽度和高度必须放在行内样式中，style中无效 -->
    <canvas id="cvs" width="500px" height="300px"></canvas>
    <script>
      var cvs = document.getElementById('cvs');
      var ctx = cvs.getContext('2d');
      //这两句代码是2d效果通用代码：获取canvas对象并绑定2d效果

      ctx.moveTo(10,10);
      ctx.lineTo(20,10);
      ctx.lineTo(20,20);
      ctx.lineTo(10,20);
      //moveTo不绘制路径，lineTo绘制路径

      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 6;
      // 线宽和颜色必须在绘制之前设置
      ctx.stroke();

      // 2.closePath()关闭路径，最后一条边省去路径自动关闭
      ctx.moveTo(100,10);
      ctx.lineTo(160,10);
      ctx.lineTo(60,60);
      ctx.closePath();

      ctx.strokeStyle = 'yellow';
      ctx.lineWidth = 6;
      ctx.stroke();
      // 设置颜色和线宽度必须在绘制之前

    </script>
    <script>
      // 绘制矩形封装函数
      var cvs = document.getElementById('cvs');
      var ctx = cvs.getContext('2d');
      function juxing(startX,startY,width,height,lineWidth,strokeStyle){
        ctx.moveTo(startX,startY);
        ctx.lineTo(startX + width,startY);
        ctx.lineTo(startX+width,startY+height);
        ctx.lineTo(startX,startY+height);
        ctx.closePath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = strokeStyle;
        ctx.stroke();
      }
      // 为了防止重绘之前的路径，绘制新路径需要将之前的路径清除掉
      ctx.beginPath();
      juxing(100,100,10,20,3,"skyblue");
    </script>
    <script>
      // 矩形对象封装
      // 构造函数
      function JuXing(ctx,startX,startY,width,height,lineWidth,strokeStyle){
        this.ctx = ctx;
        this.startX = startX;
        this.startY = startY;
        this.width = width;
        this.height = height;
        this.lineWidth = lineWidth;
        this.strokeStyle = strokeStyle;
      }
      // 给原型添加一个绘制方法
      JuXing.prototype.draw = function(){
        this.ctx.moveTo(startX,startY);
        this.ctx.lineTo(startX + width,startY);
        this.ctx.lineTo(startX+width,startY+height);
        this.ctx.lineTo(startX,startY+height);
        this.ctx.closePath();
        this.ctx.lineWidth = lineWidth;
        this.ctx.strokeStyle = strokeStyle;
        this.ctx.stroke();
      }
      ctx.beginPath();
      var juxing = new JuXing(ctx,10,10,100,100,2,"pink");
      juxing.draw();
    </script>
    <!-- 先填充后描边。描边有一个宽度，如果先描边后填充，描边的宽度会减小。所以先填充后描边 
    ctx.fill();
    ctx.stroke(); 
    线帽设置：
    ctx.lineCap = 'round' 'square'
    交点设置：
    ctx.lineJoin = 'miter' 'round' 'bevel'-->
    <script>
      绘制三种矩形：矩形路径，描边矩形，填充矩形。
      // 矩形路径
      ctx.rect(10,10,10,10);
      ctx.stroke();
      // 描边矩形
      ctx.strokeRect(10,10,10,10);
      // 填充矩形
      ctx.fillRect(10,10,10,10);
      // 清除矩形区域
      ctx.clearRect(10,10,10,10);
    </script>
    <!-- 画布动画效果：设置间隔函数，不断清除旧图形，绘制新图形 -->
  </body>
</html>