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

最新推荐文章于 2022-04-12 14:59:51 发布
原创 最新推荐文章于 2022-04-12 14:59:51 发布 · 963 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#canvas

形状和位置如下图所示：

 

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)
    }
Canvas 2d和DOM元素下画九宫格
飓风kk的博客
06-22 389
九宫格图片： 保持四个角不受图片缩放影响，上下横向矩形部分水平缩放，左右竖向矩形垂直缩放，中间部分水平和垂直均会收到缩放影响。 1.Canvas canvas下采用drawImage API，通过原始图片的左右上下偏移量，裁剪需要获得的像素块，并在新定义的区域内展示（伴随缩放） API ctx.drawImage(img, sx, sy, sWidth, sHeight, tx, ty, tWidth, tHeight); sx sy: 原图中的起始点 sWidth, sHeight: 原图从起始点开始的区
微信小程序使用canvas制作拼图动画
jinxi1112的博客
07-15 1161
效果如上图 制作思路： 1. 制作9个由特殊图形拼成的九宫格，包含模糊和彩色高亮 2.生成的拼图进行一系列路径动画（蓄能弹起效果） 3.将生成的拼图拼贴在对应的位置上，并产生破碎动画特效 技术实现思路： 1.将拼图图片利用canvas rgb通道方法制作成模糊灰度图，参考博文https://blog.youkuaiyun.com/sunzhibin1/article/details/82387926 2.制作九宫格拼图 <view class="canvas-wrap..
canvas 拼图
weixin_34302561的博客
02-15 283
效果 代码 &lt;!DOCTYPE html&gt; &lt;html lang="zh_CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拼图&lt;/title&gt; &lt;script src="https://code.jq...
Canvas 画九宫格图片
qq_20173207的博客
01-17 2563
在做微信小游戏的时候，需要在开放域绘制页面，而且不是固定大小的底，这就不得不，用九宫格绘制页面底了 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...
javascript+canvas制作九宫格小程序
10-24
主要介绍了javascript+canvas制作九宫格小程序，效果非常棒，这里推荐给有需要的小伙伴们
HTML5 Canvas简简单单实现手机九宫格手势密码解锁
weixin_34068198的博客
07-05 287
From http://www.cnblogs.com/amylis_chen/p/4142588.html#3117954 早上花了一个半小时写了一个基于HTML Canvas的手势解锁，主要是为了好玩，可能以后会用到。思路：根据配置计算出九个点的位置，存入一个数组，当然存入数组的顺序的索引是：　　　第一行：0   1  2  　　第二行：3  4  5 　　第三行：6  7  8       ...
WPF Canvas九宫格拼图动画效果实现
本文档的主题是“WPF实现九宫格拼图携带动画”，涉及到了在WPF中使用Canvas作为布局容器以及添加动画效果来实现一个具有交互性的九宫格拼图游戏。 首先，了解九宫格拼图游戏的基本概念是必要的。九宫格拼图，也常被...
微信小游戏 九宫格熟读
最新发布
01-28
### 微信小游戏九宫格显示问题解决方案 在微信小游戏开发过程中，九宫格布局是一个常见的需求。对于九宫格游戏的显示问题，可以从多个方面进行排查和优化。 #### 1. 布局调整与适配 为了确保九宫格能够正确显示，...
利用原生的JavaScript实现简单拼图游戏
10-17
在利用原生的JavaScript实现简单拼图游戏的过程中，首先需要了解游戏的基础逻辑，其中包括图形绘制、事件处理和定时器的使用。以下是具体的知识点： 1. 图形绘制 图形绘制是实现游戏的起始步骤，通过JavaScript在...
拼图游戏代码html5,翻译的HTML5拼图游戏（附源码）
weixin_35548251的博客
05-30 1422
demo.jpg (80.15 KB, 下载次数: 41)2013-12-10 11:05 上传HTML5技术之图像处理：一个滑动的拼图游戏HTML5有许多功能特性可以把多媒体整合到网页中。使用canvas元素可以在这个空白的画板上填充线条，载入图片文件，甚至动画效果。在这篇文章中，我将做一个滑动拼图的游戏用来展示HTML5 canvas的图片处理能力。在网页中使用canvas标签用来创建画板复制...
js-canvas-拼图
12-26
基于js和canvas开发的拼图，可以拖拽上传图片，自动切图、随机打乱、判断结束等
[模仿]canvas视频拼图
06-21
好久以前的了，那时html5刚出来不久吧，国外有人做了个用canvas来拼视频的游戏，觉得挺好玩的，就模仿了一下（模仿也是好久以前的事了）
canvas拼图游戏,基于html + canvas画布实现
03-18
canvas拼图游戏,基于html + canvas画布实现
vue canvas 粒子拼图特效
03-18
基于vue canvas 的动态拼图效果 环境： vue node 使用：npm install 或 cnpm install npm run serve
基于Canvas的N宫格拼图
qq_40734247的博客
10-24 847
最近使用Canvas实现了一个N宫格拼图的游戏，感觉效果还是很不错的，不过我还是觉得九宫格就好了，太多了反而就复杂了。这里我就主要讲述九宫格的实现过程，其它的只是把数据结构扩大一下了。 实现效果 图片效果 视频效果 九宫格美女拼图 N宫格实现 大体设计思路 鼠标移动时依次绘制网格矩形，同时判断鼠标落点所在网格起始位置；当鼠标离开或者移出时，依据鼠标落点最后所在的网格的起点绘制矩形；不能
canvas 基础系列（三）之实现九宫格抽奖
weixin_33841722的博客
08-18 964
上一章讲解了如何使用 canvas 实现大转盘抽奖点击回顾；但有些地方并没有讲清楚，比如上一章实现的大转盘，奖品选项只能填文字，而不能放图片上去。这一次，我们用 canvas 来实现九宫格抽奖（我已沉迷抽奖无法自拔~），顺便将渲染图片功能也给大家过一遍。本章涉及到的知识点，主要有： context.drawImage() 方法渲染图片 context.isPointInPath() 方法，在画...
用canvas实现九宫格切图之手把手教学（uniapp+ts）
qq_44604051的博客
04-12 2376
uniapp用canvas实现九宫格切图（typescript）前言上传图片展示图片画布下载图片总结 前言 这几天工作比较轻松，所以就有时间发下呆，突然想起前段时间用了一个九宫格切图软件，所以就自己试着开发下，期间不少问题也是问领导的，领导知道我在摸鱼但也很耐心帮我（受宠若惊），所以在这里谢谢他。 上传图片 handleUpload(): void { uni.chooseImage({ sizeType: ['original'], success: (chooseI
拼图游戏Canvas版
小沅白的工作笔记
07-15 1266
原身 一开始写的拼图是用div一个一个列出来的，里面放的是切好的图片。拼图小游戏（前端） canvas版的思路 游戏结束的判定与上一个版本一样，数组的顺序达到了它对应的位置，表示游戏结束。 因为使用canvas，我们需要记录每块拼图在图片上的位置和大小，记录成数组 canvas方法 canvas.drawImage()使用可以参照drawImage()方法 代码部分 HMTL <!-- 流程1，选择想拼的图片 --> 流程1，选择想拼的图片 <div class="pro
html5+canvas+九宫格,javascript+canvas制作九宫格小程序
weixin_35895485的博客
06-05 272
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...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值