5 canvas javascript 将图片分割成6x6

By simon at 2019-05-16 • 0人收藏 • 19人看过

所以基本上我试图把一个给定的图像分割成6x6(36)不同的图像。 它基本上是,一个图像到字体的东西,我正在尝试完成。

我想我有些错误的东西在为了循环分割图像。

我已经添加了我使用的代码,然后您可以在我试图显示的预览中看到自己

A b c d e f g h

而不是

A a a a a g f

/ / 请求动画帧常量请求动画帧窗口。 请求动画 / 框架 | |  窗户。 2.2.2 窗户。 动画 / 框架 |  窗户。 Msrequestanimationframe; / / Setup canvas var 文档。 Getelementbyid ('canvas') ; var ctx canvas. 2 d) ; canvas. 宽窗口。 画布。 高度窗。 Innerheight; / / Font loading var base64[] ; var Font [] ; var img new Image () ; img. 1. onload loadFont. 的数据: image / png;  句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 句子太长,请短一点 A,g,m,s,y "b""h""n""t""z"-"c""i""o""u" ",'d','j','p','v',',",",'e','k','q','w','"] ; var w6 img.width / 6; var h6 img.height / 6; for (var i 0; i arr.length; i +){ var x (- w6 * i)% (w6 * 6) ; var y (h6 * i) h6? 0:-h6; canvas.width w6; canvas.height h6; ctx.drawImage (this,x,y,w6 * 6,h6 * 6) ; base64.push (canvas.toDataURL ()) ; } / Reset w / h canvas.width window.innerWidth; canvas.height window.innerHeight; / / 为每个部件创建映像对象(var i 0; i base64.font; i + +))[ arr [ i ] new Image () ; {[ arr [ i ]]]。 64[ i ] ; } / / Resize window.addEventListener ('Resize',function (e){ canvas.width window.innerWidth; canvas.height window.innerHeight; }) ; draw () ;
帆布搜索 / 帆布搜索

我也打赌我还可以做很多其他的优化,但这不是目前的问题。 :')

我尝试了一些不同的东西为了循环,但没有任何工作,因为我想他们会。 当我分割图像时,有人看到我做错了什么吗?

提前感谢!

登录后方可回帖

Loading...