JavaScript 俄罗斯方块 - Canvas基础 画线

已于 2023-02-26 00:08:22 修改
阅读量602 收藏
点赞数 1
分类专栏： JavaScript实战开发-俄罗斯方块 文章标签： javascript css 前端 canvas Powered by 金山文档
于 2023-02-25 22:18:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/brilliancezhou/article/details/129217972
版权

JavaScript 是前端核心， 掌握这门语言是步入前端高手行列必经之路， 现代前端当然别忘了还有TypeScript, 学习它需要面向对象(OOP)基础知识， 底层的浏览器原理、HTTP协议也必不可少， 本专栏从基础开始一步步带你实现俄罗斯方块小游戏， 让你从有趣的实战中学习JavaScript，事半功倍。

本节主要内容

  1. Canvas对象
  1. Canvas绘图关键API

一、创建一个HTML页面，包含Canvas标签

  • 创建一个网页，其中包含canvas标签，并定义了id

  • canvas样式设置，使用了CSS中的position:absolute, 此属性会将元素脱离标准流，可使用top和left指定其在HTML页面中的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas绘图基础</title>
    <style>
        canvas {
            position: absolute;
            background: white;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        canvas {
            background: linear-gradient(120deg, #4a3934, #e6d5b9);
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
    </script>
</body>
核心知识点：canvas 标签， css中的position:absolute位置排版

二、使用canvas画布，画线

  • 在<script>标签中编写代码

  • 使用以下浏览器对象document的getElementById或querySelector方法获取canvas元素

  • document.getElementById('canvas')

  • document.querySelector('#canvas')

  • 使用canvas对象的getContext获取2d上下文对象

  • 设置canvas的宽度和高度，使用浏览器对象window的两个属性innerWidth和innerHeight

// canvas API 提示
/** @type {HTMLCanvasElement} */

//获取canvas元素
const canvas = document.getElementById('canvas')
//获取canvas绘图上下文对象
const ctx = canvas.getContext('2d')
//设置canvas宽度和高度
canvas.width = window.innerWidth
canvas.height = window.innerHeight

//从坐标(0,0) 到 (200, 0) 这个位置画一根线
ctx.moveTo(0, 0)     
ctx.lineTo(200, 0)
//设定线的颜色
ctx.strokeStyle =  "yellow"
//设定线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

  • 运行结果

三、translate函数

  • 使用ctx.translate函数，将原点坐标平移,可平移到任意坐标位置

  • 平移坐标到 (100,100) 并以此为原点 ctx.translate(100,100)，然后再绘图

// canvas API 提示
/** @type {HTMLCanvasElement} */

//获取canvas元素
const canvas = document.getElementById('canvas')
//获取canvas绘图上下文对象
const ctx = canvas.getContext('2d')
//设置canvas宽度和高度
canvas.width = window.innerWidth
canvas.height = window.innerHeight

//平移坐标到(100,100)， 下面的绘图会以此为原点
ctx.translate(100,100)

//从坐标(0,0) 到 (200, 0) 这个位置画一根线
ctx.moveTo(0, 0)     
ctx.lineTo(200, 0)
//设定线的颜色
ctx.strokeStyle =  "yellow"
//设定线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

  • 移动到canvas中心点,也就是当前绘图以canvas中心点为原点

//平移坐标到canvas的中心点， 下面的绘图会以此为原点
ctx.translate(canvas.width/2,canvas.height/2)

四、连续画线: beginPath()和closePath()

  • 在上面代码的基础上再画一根红线

//指定线颜色
ctx.strokeStyle =  "red" 
//指定结束位置坐标， 此次画线会以上次结束位置作为开始
ctx.lineTo(200, 30)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

  • 结果是第一次画的线也变成红色，canvas的 context连续画图样式会以最后一次设置为准

  • 如果我们需要让第一根线是yellow, 第二根线为red,怎么办？ 这时beginPath函数就派上用场了

// canvas API 提示
/** @type {HTMLCanvasElement} */
/* 省略前面部分代码 */
//将当前画布Canvas的中心点作为原点
ctx.translate(canvas.width/2,canvas.height/2)

//从坐标(0,0) 到 (200, 0) 这个位置画一根线
ctx.moveTo(0, 0)     
ctx.lineTo(200, 0)
//设定线的颜色
ctx.strokeStyle =  "yellow"
//设定线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

//第二根线
//重新开始新的路径,也可以想像成它是一个新的“层”
ctx.beginPath()
//设定颜色
ctx.strokeStyle =  "red" 
//开始坐标位置
ctx.moveTo(200, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

  • 如果想从(0,0)位置开始画线，更改开始坐标位置即可,下面代码中结束坐标到(200,30)

// canvas API 提示
/** @type {HTMLCanvasElement} */
/* 省略前面部分代码 */
//将当前画布Canvas的中心点作为原点
ctx.translate(canvas.width/2,canvas.height/2)

//从坐标(0,0) 到 (200, 0) 这个位置画一根线
ctx.moveTo(0, 0)     
ctx.lineTo(200, 0)
//设定线的颜色
ctx.strokeStyle =  "yellow"
//设定线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

//第二根线
//重新开始新的路径,也可以想像成它是一个新的“层”
ctx.beginPath()
//设定颜色
ctx.strokeStyle =  "red" 
//开始坐标位置
ctx.moveTo(0,0) //或者使用 ctx.lineTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 30)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

五、旋转rotate(弧度) 函数

  • 下面利用旋转函数rotate画出下面的图形, 需要清楚一点几何知识

/*省略其它代码*/

//重新开始新的路径，也可以想像成它是一个新的“层”
ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "red" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

  • 注意rotate函数的参数是弧度，1弧度约为57.2958...角度

  • 下图描述了弧度和角度的关系

  • 换算公式

  • 1弧度是 大约 57.2958角度

  • 将弧度转换为角度：乘以 180，除以 π

  • 将角度转换为弧度：乘以 π，除以 180

  • 弧度是基于圆的半径的纯计量单位

  • 在一个半圆上有 π 弧度，也等于 180°, 所以: π 弧度 = 180° 那么 : 1弧度 = 180°/π = 57.2958……°

六、save()和restore()方法

  • 根据上面的代码，旋转角度，再多画两根线， 一共4根线，每根线旋转弧度都是0.5

ctx.translate(canvas.width/2,canvas.height/2)
//从坐标(0,0) 到 (200, 0) 这个位置画一根线
ctx.moveTo(0, 0)     
ctx.lineTo(200, 0)
//设定线的颜色样式为黄色
ctx.strokeStyle =  "yellow"
//设定线宽
ctx.lineWidth = 10
//画线
ctx.stroke()
 
//重新开始新的路径，也可以想像成它是一个新的“层”
ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "red" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()


ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "blue" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "orange" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()
从上面的代码运行结果可以看出，每次画线都是相对于上一根线的位置旋转0.5个弧度，也就是说上一次绘制的图形会影响下一次的绘制, 如果我们希望红、蓝、橙三根线都相对于原始位置来画该怎么办? 此时save()和restore()方法就派上用场了

  • 尝试在画蓝色线时使用save()和restore()方法

ctx.translate(canvas.width/2,canvas.height/2)
//从坐标(0,0) 到 (200, 0) 这个位置画一根线
ctx.moveTo(0, 0)     
ctx.lineTo(200, 0)
//设定线的颜色样式为黄色
ctx.strokeStyle =  "yellow"
//设定线宽
ctx.lineWidth = 10
//画线
ctx.stroke()
 
//重新开始新的路径，也可以想像成它是一个新的“层”
ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "red" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()

//------------------save()开始--------------------------------------------
ctx.save()
ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "blue" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()
ctx.restore()
//-----------------------restore()结束---------------------------------


ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "orange" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(200, 0)
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()
可以看到蓝色的线不见了，其实是被橙色的线给遮住了，你可以将橙色线的x坐标减小可以看到效果 
ctx.beginPath()
//旋转0.5个弧度
ctx.rotate(0.5)
//设定颜色
ctx.strokeStyle =  "orange" 
//开始坐标位置
ctx.moveTo(0, 0)
//结束坐标位置
ctx.lineTo(150, 0)  //橙色的线缩短一点
//线宽
ctx.lineWidth = 10
//画线
ctx.stroke()
结果是第四根橙线不再依据第三根线旋转角度，而是依据第二根红线旋转角度，对于第四根橙线来说就好像第三根蓝线不存在一样, 可以认为save()和restore()方法包进去的画图独立存在，其实这里是使用的栈结构，也可以想像成类似于position:absolute让元素脱离标准流
七、小结

  • 本文介绍了如何创建Canvas,并使用它进行绘图操作

  • 常用函数translate() rotate() beginPath() closePath() save() restore()的使用方法

  • 你能画出下面的图形吗?

蒾途笑笑生
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 俄罗斯方块 - Canvas基础:旋转和动画
蒾途尐書瞳的专栏
02-27 322
怎样在画布中绘制图片？怎样使用save和restore函数? rAF函数让图片动起来，为后续开发工作储备基础知识
Vue3+Canvas实现俄罗斯方块
qq_43225508的博客
05-11 694
Vue3+Canvas实现俄罗斯方块
JavaScript Canvas 俄罗斯方块
allway2的博客
07-05 500
Javascript 俄罗斯方块 2011 年 10 月 10 日，星期一 我之前的游戏，蛇，需要一段时间才能发货。了解完成游戏意味着什么是一次很好的体验，但实际上，这些只是我玩一些基本游戏机制和学习一点游戏编程的副项目。如果我在每个小项目上都花那么多时间，到 2035 年我仍然会这样做…… ……考虑到这一点，我需要确保我的下一场比赛是一个短暂的、单一的周末项目，所以我选择了一个简单的项目，而且我没有花任何时间来完善它，超出了……的主要游戏机制。 俄罗斯方块 现..
用JavaScript写的俄罗斯方块小游戏（很简单，很详细）
编程界明世隐的博客
02-25 9400
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:320px; height:450px; position:absolute; margin:0 auto
js 实现俄罗斯方块
weixin_39394140的博客
01-27 8072
实现思路 MVC思路。三个端分工合作。可以仔细看。整个俄罗斯方块为一个二维数组。C控制M, M控制二维数组，V只要把二维数组渲染出来就行 。 视图层 html部分 <canvas id="canvas"></canvas> js部分 // 画背景 function drawBG(){ CTX.lineWidth = 1; CTX.fil...
HTML5的俄罗斯方块
Vicc_Lee
01-17 2804
运用HTML5/CSS3/JavaScript开发一个小游戏：俄罗斯方块。 三个文件：tetris.html、tetris.css、tetris.js （完整的js代码在文末）
canvas 基本用法
似水流年QC的博客
07-05 3271
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
Canvas
喜大普奔
03-09 3360
canvas
基于java的俄罗斯方块小游戏设计(含源文件)
【完整】
03-04 4511
欢迎添加微信互相交流学习哦！ 项目源码：https://gitee.com/oklongmm/biye 题 目 小游戏开发 摘 要 俄罗斯方块是我们最常见的游戏之一，该游戏出现过在掌上游戏机、家用游戏机、手机游戏和电脑游戏中，因此俄罗斯方块也是一个十分经典的游戏。我们可以在网上下载到各式各样的俄罗斯方块游戏，也可以在各个游戏大厅中见到网络对战形式的俄罗斯方块。一般的俄罗斯方块规则比较简单，游戏中随机出现一些方块，再对这些方块进行变换，下降到游戏界面中的不同位置，如...
Javascript俄罗斯方块（canvas版）
09-11
本项目“Javascript俄罗斯方块（canvas版）”就是利用JavaScript的强大力量，结合HTML5的Canvas元素，实现了经典游戏——俄罗斯方块。Canvas是HTML5新增的绘图工具，允许开发者在网页上进行图形绘制，为网页游戏开发...
javascript俄罗斯方块.zip
09-15
【JavaScript俄罗斯方块游戏开发详解】 在编程世界中，JavaScript是一种广泛应用的脚本语言，尤其在Web开发领域，它扮演着至关重要的角色。利用JavaScript，我们可以实现许多有趣的交互功能，其中之一就是开发游戏...
canvas俄罗斯方块
01-19
"canvas俄罗斯方块"是一款基于HTML5的Canvas技术开发的小型游戏，它是利用JavaScript编程语言实现的。Canvas是HTML5的一个重要组成部分，提供了一个在网页上绘制图形的API，允许开发者动态生成图形，而非依赖于预先...
Tetris[removed]使用canvas2d和javascript的简单俄罗斯方块游戏
04-17
Canvas2D API提供了丰富的绘图方法，如画线、填充矩形、绘制图像等，为我们构建游戏场景提供了基础。 在构建俄罗斯方块游戏时，我们首先需要定义游戏的基本元素。这些元素包括：游戏区域（一个网格）、不同形状的...
俄罗斯方块_html5canvas_javascript_topic492_
10-01
"俄罗斯方块_html5canvas_javascript_topic492_" 这个标题表明我们正在讨论一个使用HTML5 Canvas和JavaScript编程语言实现的俄罗斯方块游戏项目。HTML5 Canvas是HTML5的一个重要特性，它允许开发者在网页上进行图形...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 761
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
更新商品前端接口编写
weixin_55639995的博客
07-12 411
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 686
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 533
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
javascript俄罗斯方块
12-15
以下是一个简单的JavaScript俄罗斯方块游戏的实现，其中包括方块的移动、旋转、消除等功能： ```javascript // 定义方块的形状 var shapes = [ [[1, 1, 1], [0, 1, 0]], [[0, 2, 2], [2, 2, 0]], [[3, 3, 0], [0, 3, 3]], [[4, 0, 0], [4, 4, 4]], [[0, 0, 5, 0], [0, 5, 5, 5]], [[6, 6], [6, 6]] ]; // 定义方块的颜色 var colors = [ '#000000', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF' ]; // 定义游戏区域的大小 var ROWS = 20; var COLS = 10; // 定义游戏区域的数组 var board = []; // 初始化游戏区域的数组 for (var i = 0; i < ROWS; i++) { board[i] = []; for (var j = 0; j < COLS; j++) { board[i][j] = 0; } } // 定义方块的构造函数 function Block() { this.row = 0; this.col = 3; this.shape = shapes[Math.floor(Math.random() * shapes.length)]; this.color = colors[Math.floor(Math.random() * colors.length)]; } // 定义方块的移动函数 Block.prototype.move = function (drow, dcol) { if (!this.collides(this.row + drow, this.col + dcol, this.shape)) { this.row += drow; this.col += dcol; } }; // 定义方块的旋转函数 Block.prototype.rotate = function () { var newShape = []; for (var i = 0; i < this.shape[0].length; i++) { newShape[i] = []; for (var j = 0; j < this.shape.length; j++) { newShape[i][j] = this.shape[this.shape.length - 1 - j][i]; } } if (!this.collides(this.row, this.col, newShape)) { this.shape = newShape; } }; // 定义方块的碰撞检测函数 Block.prototype.collides = function (row, col, shape) { for (var i = 0; i < shape.length; i++) { for (var j = 0; j < shape[i].length; j++) { if (shape[i][j] && (row + i >= ROWS || col + j < 0 || col + j >= COLS || board[row + i][col + j])) { return true; } } } return false; }; // 定义方块的绘制函数 Block.prototype.draw = function () { for (var i = 0; i < this.shape.length; i++) { for (var j = 0; j < this.shape[i].length; j++) { if (this.shape[i][j]) { drawSquare(this.row + i, this.col + j, this.color); } } } }; // 定义方块的消除函数 Block.prototype.clear = function () { for (var i = 0; i < this.shape.length; i++) { for (var j = 0; j < this.shape[i].length; j++) { if (this.shape[i][j]) { board[this.row + i][this.col + j] = 0; } } } }; // 定义方块的下落函数 Block.prototype.fall = function () { if (!this.collides(this.row + 1, this.col, this.shape)) { this.row++; } else { this.lock(); currentBlock = new Block(); } }; // 定义方块的锁定函数 Block.prototype.lock = function () { for (var i = 0; i < this.shape.length; i++) { for (var j = 0; j < this.shape[i].length; j++) { if (this.shape[i][j]) { board[this.row + i][this.col + j] = this.color; } } } for (var i = 0; i < ROWS; i++) { if (board[i].every(function (x) { return x !== 0; })) { board.splice(i, 1); board.unshift(new Array(COLS).fill(0)); } } }; // 定义绘制方块的函数 function drawSquare(row, col, color) { ctx.fillStyle = color; ctx.fillRect(col * 30, row * 30, 30, 30); ctx.strokeStyle = '#CCCCCC'; ctx.strokeRect(col * 30, row * 30, 30, 30); } // 获取画布和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 绘制游戏区域的函数 function drawBoard() { for (var i = 0; i < ROWS; i++) { for (var j = 0; j < COLS; j++) { drawSquare(i, j, colors[board[i][j]]); } } } // 定义当前方块 var currentBlock = new Block(); // 定义游戏循环 function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBoard(); currentBlock.draw(); currentBlock.fall(); } // 启动游戏循环 setInterval(gameLoop, 500); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值