Canvas 2d和DOM元素下画九宫格

最新推荐文章于 2024-10-23 22:38:00 发布

原创

最新推荐文章于 2024-10-23 22:38:00 发布 · 401 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #html #javascript #html5

本文介绍了如何使用Canvas的drawImage API和DOM元素来实现九宫格图片的缩放效果。在Canvas中，通过裁剪图片并调整显示区域实现；在DOM中，利用div的background属性、position和size，结合图片缩放后的反向移动技巧来达成目的。

九宫格图片：
保持四个角不受图片缩放影响，上下横向矩形部分水平缩放，左右竖向矩形垂直缩放，中间部分水平和垂直均会收到缩放影响。
1.Canvas
canvas下采用drawImage API，通过原始图片的左右上下偏移量，裁剪需要获得的像素块，并在新定义的区域内展示（伴随缩放）
API

ctx.drawImage(img, sx, sy, sWidth, sHeight, tx, ty, tWidth, tHeight);
sx sy: 原图中的起始点
sWidth, sHeight: 原图从起始点开始的区域
tx ty

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飓风kk

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

基于Canvas的九宫格抽奖，就是仿csdn的APP做的，能过审不？

编程界明世隐的博客

04-12

4412

引言： 九宫格抽奖一直就挺火爆，手机端也经常用，这不来了兴趣写了一波，看着效果还不错，拿出来大家唠唠！效果：实现思路绘制出背景大图，两张图片，一张稍微小，并且稍小的图片颜色更深一些；绘制8张白色背景的小图片（绘制的顺序？待会说明），作为奖项卡的背景，一张立即抽奖的黄色背景图片放在中间；在对应的背景图片上，绘制出奖项图片和文字，完成整个抽奖页面的布局；给立即抽奖的背景图片添加点击事件，点击后旋转【开启定时任务】（旋转方式有3种，目前写了顺时针一种，另外

用canvas实现九宫格切图之手把手教学（uniapp+ts）

qq_44604051的博客

04-12

2428

uniapp用canvas实现九宫格切图（typescript）前言上传图片展示图片画布下载图片总结前言这几天工作比较轻松，所以就有时间发下呆，突然想起前段时间用了一个九宫格切图软件，所以就自己试着开发下，期间不少问题也是问领导的，领导知道我在摸鱼但也很耐心帮我（受宠若惊），所以在这里谢谢他。上传图片 handleUpload(): void { uni.chooseImage({ sizeType: ['original'], success: (chooseI

参与评论您还未登录，请先登录后发表或查看评论

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

jinxi1112的博客

07-15

996

形状和位置如下图所示： 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 .

javascript+canvas制作九宫格小程序

10-24

主要介绍了javascript+canvas制作九宫格小程序，效果非常棒，这里推荐给有需要的小伙伴们

Canvas 画九宫格图片

qq_20173207的博客

01-17

2595

在做微信小游戏的时候，需要在开放域绘制页面，而且不是固定大小的底，这就不得不，用九宫格绘制页面底了 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...

HTML5 Canvas简简单单实现手机九宫格手势密码解锁

weixin_34068198的博客

07-05

305

From http://www.cnblogs.com/amylis_chen/p/4142588.html#3117954 早上花了一个半小时写了一个基于HTML Canvas的手势解锁，主要是为了好玩，可能以后会用到。思路：根据配置计算出九个点的位置，存入一个数组，当然存入数组的顺序的索引是：　　　第一行：0 1 2 　　第二行：3 4 5 　　第三行：6 7 8 ...

JQuery实现九宫格抽奖转盘动画效果教程

- **初始化九宫格布局**：通常，九宫格抽奖游戏会使用一个2D数组或者对象来存储奖品信息，每个格子对应数组的一个元素。 - **随机选择奖品**：抽奖的关键在于随机选择一个九宫格中的奖品，这通常涉及到随机数生成...

优惠券九宫格抽奖.zip

06-01

在互联网营销中，优惠券九宫格抽奖已经成为一种常见的促销手段，它以其独特的视觉效果和互动性吸引着用户参与。这里我们关注的是一个基于HTML5技术实现的精美优惠券抽奖手机页面。这个项目名为“优惠券九宫格抽奖”...

H5+JS打造动态九宫格抽奖系统

2. **Canvas API**：在九宫格抽奖项目中，可能会用到HTML5的Canvas元素来绘制九宫格界面，通过Canvas API可以进行2D绘图。 3. **多媒体元素**：如`<audio>`和`<video>`，可能会用于在抽奖过程中提供音效和动画效果。...

实现九宫格顺时针抽奖效果的jQuery代码

开发者可以使用Canvas的绘图上下文（2D或3D）来绘制复杂的图形，包括本例中的九宫格轮盘。 3. CSS布局与样式：通过CSS可以定义抽奖界面的布局和样式，使得九宫格看起来更加美观。CSS中的Flexbox布局或Grid布局可以...

js-canvas-拼图

12-26

基于js和canvas开发的拼图，可以拖拽上传图片，自动切图、随机打乱、判断结束等

[模仿]canvas视频拼图

06-21

好久以前的了，那时html5刚出来不久吧，国外有人做了个用canvas来拼视频的游戏，觉得挺好玩的，就模仿了一下（模仿也是好久以前的事了）

H5的Canvas绘图——使用fabricjs绘制一个可多选的随机9宫格

最新发布

网尘的技术专栏

10-23

1552

Fabric.js是一个强大的 JavaScript 库，专门用于在 HTML5 Canvas 上进行图形和图像处理。它为开发者提供了一个简单而直观的 API，使得创建和操作复杂的图形变得更加容易。Fabric.js 的核心特点包括对象模型、事件系统、以及丰富的图形绘制功能。🚩首先，Fabric.js 的对象模型允许开发者将 Canvas 中的每个图形元素视为一个独立的对象。这些对象可以是矩形、圆形、线条、文本等，用户可以通过简单的代码对它们进行创建、修改和删除。

HTML5 Canvas中9宫格的坑

weixin_33738982的博客

02-16

854

近期小鸟情人游戏上了手机qq空间，一个3岁的游戏来了她的第二春。为了能有更好的表现，我们对其进行了一次改版。改版当中一项就是对原来的弹出框样式进行改进。将大块木板材质改成纯色（边框为圆角金属材质）样式。这样就能够通过9宫格的方式。将图片进行最大程度的缩减。 9宫格原理非常easy，将图片分成9块。当中四个角不拉伸，上下边框进行横向拉伸。左右边框进行纵向拉伸，中间部分则进行随意...

canvas 基础系列（三）之实现九宫格抽奖

weixin_33841722的博客

08-18

981

上一章讲解了如何使用 canvas 实现大转盘抽奖点击回顾；但有些地方并没有讲清楚，比如上一章实现的大转盘，奖品选项只能填文字，而不能放图片上去。这一次，我们用 canvas 来实现九宫格抽奖（我已沉迷抽奖无法自拔~），顺便将渲染图片功能也给大家过一遍。本章涉及到的知识点，主要有： context.drawImage() 方法渲染图片 context.isPointInPath() 方法，在画...

j2me中 cavans 写的九宫格

ashengjie的专栏

12-29

1450

public class NineMidlet extends MIDlet { private myCanvas mycanvas; private showImage showimg; private Display dis; public void startApp() { dis = Display.getDisplay(this

Js_Dom(8)__Dom基础<画布canvas>

Richard_xx的博客

08-09

821

canvas标签 1.Canvas是HTML5提供的一个标签,我们可以在这个盒子区域绘画 2.怎么绘画的呢?canvas对象有个一个方法可以让我们获取到一个CanvasRendderingContext2D对象,这个对象给我们提供了在canvas盒子上画图的功能. 3.不是所有的浏览器都支持canvas标签,几乎所有智能手机都支持这个标签 4.canvas市场:游戏,广告,动画,数据图形结

dom -> canvas

[暂停使用]任先阳

05-07

468

前端图形、算法这块还差很多，身处一个注重UI的公司，先从常用的图形开始··· #1、ctx = element.getContext('2d'); 让元素可以绘图。 #2、ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 【引】dom -> canvas：https://blog.youkuaiyun.com/u01008168...

html5+canvas+九宫格,HTML5+canvas一箭穿心

weixin_32145817的博客

06-05

324

表白神器HTML5的canvas画一箭穿心作为一个专业得程序员，咱们的表白怎能一个送花，几句情话了得，当然是要上代码啦！！！Draw Heart* {margin: 0;padding: 0;}html {height: 100%;margin: 0;}body {height: 100%;background-color: white;}#canvasZone {width: 100%;heig...

深入探讨Canvas技术在九宫格抽奖游戏的应用

根据所提供的文件信息，我们将详细探讨“基于Canvas的九宫格抽奖”所涉及的相关知识点。首先，需要明确的是Canvas，它是指在HTML5中引入的一个可以绘制图形的API，其全称为Canvas API。Canvas提供了通过JavaScript...