canvas制作九宫格拼图（坐标完整版）

最新推荐文章于 2023-08-10 11:55:50 发布
最新推荐文章于 2023-08-10 11:55:50 发布
阅读量818 收藏
点赞数
分类专栏： 小程序 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinxi1112/article/details/118765231
版权

形状和位置如下图所示：

 

drawOne (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 5 * r)
      ctx.arcTo(13 * r, 5 * r, 13 * r, 6 * r, r)
      ctx.lineTo(13 * r, 7 * r)
      ctx.arcTo(13 * r, 8 * r, 11 * r, 8 * r, r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(8.5 * r, 11 * r)
      ctx.arcTo(8.5 * r, 10 * r, 7.5 * r, 10 * r, r)
      ctx.lineTo(6.5 * r, 10 * r)
      ctx.arcTo(5.5 * r, 10 * r, 5.5 * r, 11 * r, r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawTwo (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 5 * r)
      ctx.arcTo(13 * r, 5 * r, 13 * r, 6 * r, r)
      ctx.lineTo(13 * r, 7 * r)
      ctx.arcTo(13 * r, 8 * r, 11 * r, 8 * r, r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(8.5 * r, 11 * r)
      ctx.arcTo(8.5 * r, 10 * r, 7.5 * r, 10 * r, r)
      ctx.lineTo(6.5 * r, 10 * r)
      ctx.arcTo(5.5 * r, 10 * r, 5.5 * r, 11 * r, r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 8 * r)
      ctx.arcTo(3 * r, 8 * r, 3 * r, 7 * r, r)
      ctx.lineTo(3 * r, 6 * r)
      ctx.arcTo(3 * r, 5 * r, 2 * r, 5 * r, r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawThree (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(8.5 * r, 11 * r)
      ctx.arcTo(8.5 * r, 12 * r, 7.5 * r, 12 * r, r)
      ctx.lineTo(6.5 * r, 12 * r)
      ctx.arcTo(5.5 * r, 12 * r, 5.5 * r, 11 * r, r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 8 * r)
      ctx.arcTo(3 * r, 8 * r, 3 * r, 7 * r, r)
      ctx.lineTo(3 * r, 6 * r)
      ctx.arcTo(3 * r, 5 * r, 2 * r, 5 * r, r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawFour (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(5.5 * r, 2 * r)
      ctx.arcTo(5.5 * r, r, 6.5 * r, r, r)
      ctx.lineTo(7.5 * r, r)
      ctx.arcTo(8.5 * r, r, 8.5 * r, 2 * r, r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 5 * r)
      ctx.arcTo(11 * r, 5 * r, 11 * r, 6 * r, r)
      ctx.lineTo(11 * r, 7 * r)
      ctx.arcTo(11 * r, 8 * r, 12 * r, 8 * r, r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(8.5 * r, 11 * r)
      ctx.arcTo(8.5 * r, 10 * r, 7.5 * r, 10 * r, r)
      ctx.lineTo(6.5 * r, 10 * r)
      ctx.arcTo(5.5 * r, 10 * r, 5.5 * r, 11 * r, r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawFive (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(5.5 * r, 2 * r)
      ctx.arcTo(5.5 * r, r, 6.5 * r, r, r)
      ctx.lineTo(7.5 * r, r)
      ctx.arcTo(8.5 * r, r, 8.5 * r, 2 * r, r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 5 * r)
      ctx.arcTo(13 * r, 5 * r, 13 * r, 6 * r, r)
      ctx.lineTo(13 * r, 7 * r)
      ctx.arcTo(13 * r, 8 * r, 12 * r, 8 * r, r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(8.5 * r, 11 * r)
      ctx.arcTo(8.5 * r, 12 * r, 7.5 * r, 12 * r, r)
      ctx.lineTo(6.5 * r, 12 * r)
      ctx.arcTo(5.5 * r, 12 * r, 5.5 * r, 11 * r, r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 8 * r)
      ctx.arcTo(r, 8 * r, r, 7 * r, r)
      ctx.lineTo(r, 6 * r)
      ctx.arcTo(r, 5 * r, 2 * r, 5 * r, r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawSix (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(5.5 * r, 2 * r)
      ctx.arcTo(5.5 * r, 3 * r, 6.5 * r, 3 * r, r)
      ctx.lineTo(7.5 * r, 3 * r)
      ctx.arcTo(8.5 * r, 3 * r, 8.5 * r, 2 * r, r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(8.5 * r, 11 * r)
      ctx.arcTo(8.5 * r, 12 * r, 7.5 * r, 12 * r, r)
      ctx.lineTo(6.5 * r, 12 * r)
      ctx.arcTo(5.5 * r, 12 * r, 5.5 * r, 11 * r, r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 8 * r)
      ctx.arcTo(3 * r, 8 * r, 3 * r, 7 * r, r)
      ctx.lineTo(3 * r, 6 * r)
      ctx.arcTo(3 * r, 5 * r, 2 * r, 5 * r, r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawSeven (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(5.5 * r, 2 * r)
      ctx.arcTo(5.5 * r, r, 6.5 * r, r, r)
      ctx.lineTo(7.5 * r, r)
      ctx.arcTo(8.5 * r, r, 8.5 * r, 2 * r, r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 5 * r)
      ctx.arcTo(11 * r, 5 * r, 11 * r, 6 * r, r)
      ctx.lineTo(11 * r, 7 * r)
      ctx.arcTo(11 * r, 8 * r, 12 * r, 8 * r, r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawEight (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(5.5 * r, 2 * r)
      ctx.arcTo(5.5 * r, 3 * r, 6.5 * r, 3 * r, r)
      ctx.lineTo(7.5 * r, 3 * r)
      ctx.arcTo(8.5 * r, 3 * r, 8.5 * r, 2 * r, r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 5 * r)
      ctx.arcTo(11 * r, 5 * r, 11 * r, 6 * r, r)
      ctx.lineTo(11 * r, 7 * r)
      ctx.arcTo(11 * r, 8 * r, 12 * r, 8 * r, r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 8 * r)
      ctx.arcTo(r, 8 * r, r, 7 * r, r)
      ctx.lineTo(r, 6 * r)
      ctx.arcTo(r, 5 * r, 2 * r, 5 * r, r)
      ctx.lineTo(2 * r, 2 * r)
    },
    drawNine (ctx) {
      const r = 10
      ctx.moveTo(2 * r, 2 * r)
      ctx.lineTo(5.5 * r, 2 * r)
      ctx.arcTo(5.5 * r, 3 * r, 6.5 * r, 3 * r, r)
      ctx.lineTo(7.5 * r, 3 * r)
      ctx.arcTo(8.5 * r, 3 * r, 8.5 * r, 2 * r, r)
      ctx.lineTo(12 * r, 2 * r)
      ctx.lineTo(12 * r, 11 * r)
      ctx.lineTo(2 * r, 11 * r)
      ctx.lineTo(2 * r, 8 * r)
      ctx.arcTo(r, 8 * r, r, 7 * r, r)
      ctx.lineTo(r, 6 * r)
      ctx.arcTo(r, 5 * r, 2 * r, 5 * r, r)
      ctx.lineTo(2 * r, 2 * r)
    }
jinxi1112
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
拼图游戏Canvas版
小沅白的工作笔记
07-15 1109
原身 一开始写的拼图是用div一个一个列出来的，里面放的是切好的图片。拼图小游戏（前端） canvas版的思路 游戏结束的判定与上一个版本一样，数组的顺序达到了它对应的位置，表示游戏结束。 因为使用canvas，我们需要记录每块拼图在图片上的位置和大小，记录成数组 canvas方法 canvas.drawImage()使用可以参照drawImage()方法 代码部分 HMTL <!-- 流程1，选择想拼的图片 --> 流程1，选择想拼的图片 <div class="pro
html 拼图游戏,HTML5人物拼图游戏
weixin_29552845的博客
05-30 1122
7.1 人物拼图游戏介绍拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图(游戏结束)。在“游戏”中，单击滑块选择游戏难易，“容易”为3行3列拼图游戏，中间为一个4行4列拼图游戏，“难”为5行5列拼图游戏。拼块以随机顺序排列，玩家用鼠标单击空白块四周的来交换它们位置，直到所有拼块都回到原位置。拼图游戏运行结果如图7-1。 7.2 程序设计的思路HTM...
html5+canvas+九宫格,javascript+canvas制作九宫格小程序
weixin_35895485的博客
06-05 201
js核心代码/**canvasid:html canvas标签id*imageid:html img 标签id*gridcountX:x轴图片分割个数*gridcountY:y轴图片分割个数*gridspace:宫格空隙*offsetX：x*y宫格相对canvas(0，0)X坐标偏移量**offsetX：x*y宫格相对canvas(0，0)Y坐标偏移量*isanimat：是否启用动画显示*/fun...
Canvas 画九宫格图片
qq_20173207的博客
01-17 2421
在做微信小游戏的时候，需要在开放域绘制页面，而且不是固定大小的底，这就不得不，用九宫格绘制页面底了 1. 原理： 就不多说了 2. 代码 //代码可以复制到w3 这里去测试 //https://www.w3school.com.cn/tiy/t.asp?f=eg_html5_canvas_image var canvas = document.getElementById("myCanvas"); var ctx = canvas.getCont...
基于canvas、JavaScript实现滑动图片拼图验证
最新发布
灰色头像@的博客
08-10 1013
程序最重要的是滑块5，其它元素都随5的移动而变化。
基于canvas+uniapp的9宫格拼图游戏组件
qq_38545425的博客
12-07 1117
uniapp+canvas拼图游戏 获取画笔 绘图 清除画布 其他知识 获取 canvas 画布宽高，用于计算拼图图块大小 使用二维数组定义 9 宫格图块位置 为保证拼图的随机性，需要将图块位置随机打乱，并定义标号为 22 的图块为空白图块，且始终保持在右下角，即 9 宫格游戏的第 9 个位置移动滑块判断游戏是否完成
cavas使用实例 － 九宫图
lc402431247的专栏
12-21 938
做j2me时间说长不长，也有近半年了。一直没有好好研究过低级界面，都是用高级界面。这次加了一个群，大家讨论了下开源的lwuit。界面挺好，又支持3D,其它控件像tree table 等都有，能做出很好效果。但我其实只要求有一个九宫图，一个自绘的菜单，很简单的要求。一个叫太极两仪（250701791）的群友，共享了一个九宫图，自已整理了下。首先.为画九宫图,肯定要划分屏幕,就是要想好自己的屏幕大
javascript+canvas制作九宫格小程序
10-24
主要介绍了javascript+canvas制作九宫格小程序，效果非常棒，这里推荐给有需要的小伙伴们
h5九宫格拼图游戏PuzzlGame
04-29
【标题】"h5九宫格拼图游戏PuzzlGame"是一款基于HTML5技术开发的在线拼图游戏。这个游戏采用九宫格的形式，玩家需要通过拖动或点击来重新排列图片，使其恢复到原始状态。它利用了现代浏览器对HTML5的支持，如Canvas...
基于Canvas的九宫格抽奖
04-12
本项目"基于Canvas的九宫格抽奖"就是这样一个示例，它利用Canvas结合JavaScript来实现一个互动式的抽奖界面。下面我们将详细探讨这个项目的相关知识点。 首先，Canvas是HTML5新增的一个元素，它允许开发者在网页上...
HTML5全兼容九宫格布局
03-16
HTML5 九宫格 网页布局 瀑布流布局 响应式布局 全兼容的九宫格布局方案。文档，代码，demo，图片，样式，全部代码！
亲测HTML5拼图游戏代码+图片不规则+图片可换
10-11
现在HTML5大热，但看了很多介绍，都是重点介绍CANVAS而相对忽略了SVG，我个人感觉这两个技术结合，优势互补，利用SVG的交互性和CANSVAS的绘图能力，才能更好地发挥各自的作用。 以前用纯SVG做到一个拼图的DEMO，现在改为SVG和CANVAS，花了一个星期的时间，重写了这个例子，在CHROME17和FF12中进行了测试。比纯SVG速度快。
WPF实现九宫格拼图携带动画
04-13
这个Demo是我通过学习https://www.cnblogs.com/tanl/p/5710842.html这个网址，并且有感而发，因为Grid交换的时候动画不好处理，所以个人觉得换成Canvas添加动画比较简单一些，所以写了一个带动画小案例，效果还可以...
html九宫格拼图怎么做,九宫格拼图制作方法分享，只用PPT就能搞定
weixin_42477505的博客
06-19 1816
什么软件能九宫格拼图 就是九张照片拼在一起用美图秀秀就抄能把九张照片拼在一起袭。下面以小米为例介绍具体操作方法，首先准备软件：美图秀秀。1、首先打开美图秀秀，登录好个人账号，然后点击页面上方的拼图。2、打开拼图页面后，任意选择九张照片，然后点击开始拼图。3、选择九宫格模板。4、照片拼好后，点击右上角的勾。5、最后打开手机相册即可看到拼好的九宫梅照片。拼拼图的技巧1、先将拼图按复照颜色、有制无直角、...
html九图拼图游戏代码,HTML5拼图游戏
weixin_33444829的博客
05-31 1274
拼图游戏介绍 拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图(游戏结束)。 在“游戏”中，单击滑块选择游戏难易，“容易”为3行3列拼图游戏，中间为一个4行4列拼图游戏，“难”为5行5列拼图游戏。拼块以随机顺序排列，玩家用鼠标单击空白块的四周来交换它们的位置，直到所有拼块都回到原位置。拼图游戏运行结果如图所示。 sliding.js代码:var im...
html5做出九个格子效果图,将图片按9宫格等分的简单批处理脚本
weixin_32949451的博客
06-03 993
首先，为什么要按9宫格等分图片，因为一条微博里最多能上传9张图片。而在微博里，这9张图片的排列规则就是9宫格。通常我们会上传9张不同图片，表达更丰富的内容，但有时候，为了能达到更震撼的效果，9张图片最终拼成的是一张图片，在手机里观看，你会获得不一样的感觉，先看看效果，下面就是一个截图：问题是，手工用photoshop实现对图片9宫格等分，我没试验过，也不知道怎么做，但想起来也是很复杂的事情。做为一...
用jQuery UI做简单九宫格拼图
hyshucom
07-25 394
最近在搞一个很复杂的页面，搞得脑子有点疲劳。。。抽空把前段时间用jQuery UI写的一个非常简单的九宫格拼图重新分析一下，转换一下心情。 jQuery UI提供了许多非常有用的工具，如draggable、droppable等。这可以让我们用很少的代码实现复杂的功能，并且做到多浏览器兼容。 这个九宫格拼图根据需求的不同，我做了两个版本。由于两个版本的JS代码变化还是比较大的，所以我准备分开来讲...
JavaScript经典进阶：javascript – 9宫格 – 拼图
JasonHsu Blog_前端开发博客，专注前端开发
10-27 4094
实现过程中，遇到的问题 Array.from(array-like)：可以将类数组转换为数组 toDataURL 需要开启http服务，才会正常工作 什么是h5 : 基于原生js驱动的网页解析标准，它给我们提供了一系列新的API drawImage()方法的使用： dataTrdataTransfer()方法的使用： toDataURL()方法的使用： 前后端分离： 前端负责数据渲染，后端只提供数...
如何将图片拼接成九宫格？
weixin_55781396的博客
11-17 3132
在日常生活中，经常会看到九宫格的图片拼接样式，那么大家知道自己怎么操作能够快速的将图片拼接成九宫格形状吗？接下来教大家使用找图设计网站的**拼图**https://www.zhaotu.com/pintu/功能，在线制作九宫格拼图的操作方法， 有兴趣的小伙伴跟着小编来学习一下吧，非常的简单快捷，希望对大家有帮助。 点击左侧导航栏中的拼图功能，进入拼图的编辑器页面。 点击左侧“传图”，选择需要拼图的图片上传，然后点击布局，选择拼图排版的样式。 设置拼图样式的宽、高，间距，外边距，边框，圆角等参数，也可以点
用uniapp写个九宫格拼图游戏代码
03-20
以下是用uniapp写的九宫格拼图游戏代码： <template> <div class="puzzle"> <div class="grid" v-for="(item, index) in puzzleList" :key="index" :style="{backgroundImage: `url(${item})`, backgroundPosition: bgPosition(index), transform: `translate(${translateX(index)}px, ${translateY(index)}px)`}" @click="move(index)"></div> </div> </template> <script> export default { data() { return { puzzleList: [], // 拼图图片列表 emptyIndex: 8, // 空白格子的索引 gridSize: 100, // 格子大小 puzzleSize: 300, // 拼图大小 puzzleWidth: 3, // 拼图宽度 puzzleHeight: 3, // 拼图高度 puzzleImg: 'puzzle.jpg', // 拼图图片 puzzleArr: [], // 拼图数组 moveCount: 0, // 移动次数 isWin: false // 是否胜利 } }, created() { this.initPuzzle() }, methods: { // 初始化拼图 initPuzzle() { // 加载拼图图片 let img = new Image() img.src = this.puzzleImg img.onload = () => { // 将图片切成拼图 let canvas = document.createElement('canvas') canvas.width = this.puzzleSize canvas.height = this.puzzleSize let ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, this.puzzleSize, this.puzzleSize) for (let i = 0; i < this.puzzleHeight; i++) { for (let j = 0; j < this.puzzleWidth; j++) { let x = j * this.gridSize let y = i * this.gridSize let imgData = ctx.getImageData(x, y, this.gridSize, this.gridSize) let imgSrc = this.getImageSrc(imgData) this.puzzleList.push(imgSrc) this.puzzleArr.push(imgSrc) } } // 将最后一个拼图设置为空白格子 this.puzzleList.splice(this.emptyIndex, 1, '') this.puzzleArr.splice(this.emptyIndex, 1, '') // 打乱拼图 this.shufflePuzzle() } }, // 获取图片的base64编码 getImageSrc(imgData) { let canvas = document.createElement('canvas') canvas.width = imgData.width canvas.height = imgData.height let ctx = canvas.getContext('2d') ctx.putImageData(imgData, 0, 0) return canvas.toDataURL() }, // 打乱拼图 shufflePuzzle() { for (let i = 0; i < 100; i++) { let index = Math.floor(Math.random() * 9) this.move(index) } }, // 移动拼图 move(index) { if (this.isWin) { return } if (this.canMove(index)) { this.swap(index, this.emptyIndex) this.emptyIndex = index this.moveCount++ this.checkWin() } }, // 判断是否可以移动 canMove(index) { let row = Math.floor(index / this.puzzleWidth) let col = index % this.puzzleWidth let emptyRow = Math.floor(this.emptyIndex / this.puzzleWidth) let emptyCol = this.emptyIndex % this.puzzleWidth return (row === emptyRow && Math.abs(col - emptyCol) === 1) || (col === emptyCol && Math.abs(row - emptyRow) === 1) }, // 交换拼图 swap(index1, index2) { let temp = this.puzzleList[index1] this.puzzleList.splice(index1, 1, this.puzzleList[index2]) this.puzzleList.splice(index2, 1, temp) temp = this.puzzleArr[index1] this.puzzleArr.splice(index1, 1, this.puzzleArr[index2]) this.puzzleArr.splice(index2, 1, temp) }, // 检查是否胜利 checkWin() { for (let i = 0; i < this.puzzleArr.length; i++) { if (this.puzzleArr[i] !== this.puzzleList[i]) { return } } this.isWin = true alert(`恭喜你，完成拼图，用了${this.moveCount}步！`) }, // 获取背景位置 bgPosition(index) { let row = Math.floor(index / this.puzzleWidth) let col = index % this.puzzleWidth let x = col * this.gridSize let y = row * this.gridSize return `-${x}px -${y}px` }, // 获取水平方向的偏移量 translateX(index) { let col = index % this.puzzleWidth let emptyCol = this.emptyIndex % this.puzzleWidth return (col - emptyCol) * this.gridSize }, // 获取垂直方向的偏移量 translateY(index) { let row = Math.floor(index / this.puzzleWidth) let emptyRow = Math.floor(this.emptyIndex / this.puzzleWidth) return (row - emptyRow) * this.gridSize } } } </script> <style> .puzzle { width: 300px; height: 300px; display: flex; flex-wrap: wrap; border: 1px solid #ccc; } .grid { width: 100px; height: 100px; border: 1px solid #ccc; box-sizing: border-box; transition: transform 0.3s; cursor: pointer; } .grid:hover { background-color: #eee; } </style> 注意：以上代码仅供参考，可能存在错误或不完善的地方。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值