`
zhifeiji512
  • 浏览: 119800 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

canvas.translate(x,y)理解

 
阅读更多

translate(float x,float y)函数是将整个canvas水平移动x,垂直移动y距离。可以通过translate函数来实现滚动的功能。


之前对于canvas.translate(x,y)的理解有的错误,之前一直以原点(0,0)为基准点,作用就是移动原点,默认的原点(0,0)是在屏幕左上角的,你可以通过translate(x,y)把点(x,y)作为原点,就一直以为这个(x,y)就是新的坐标原点。但看一下API就会知道,这种理解是不对的,不过API上面讲解的也不太清楚:

 

 

public void translate (float dx, float dy)

Since: API Level 1
Preconcat the current matrix with the specified translation
Parameters

dx	The distance to translate in X
dy	The distance to translate in Y

 其实是原来的原点分别在x轴和y轴偏移多远的距离,然后以偏移后的位置作为坐标原点。也就是说原来在(100,100),然后translate(1,1)新的坐标原点在(101,101)而不是(1,1)

分享到:
评论

相关推荐

    android利用Paint在Canvas上实现竖排写字

    - 使用`canvas.drawText()`方法绘制文本,传入文本内容、x坐标(初始时为0,每绘制一行后减去文本宽度)、y坐标(初始时为0,每绘制一行后增加文本高度)。 - 使用`canvas.restore()`恢复Canvas的状态,结束竖排...

    原生js html5 canvas 3D云动画效果

    ctx.translate(x, y); ctx.rotate(rotation * Math.PI / 180); // 旋转角度转换为弧度 ctx.beginPath(); ctx.fillStyle = 'white'; ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; ctx.shadowBlur = 20; ctx.arc(0...

    使用canvas画线,位移,旋转,绘制五角星。

    位移操作`translate()`可以改变后续绘图的原点坐标,它接受两个浮点参数,分别代表x轴和y轴上的位移量。 ```java canvas.translate(dx, dy); ``` 旋转操作`rotate()`以Canvas的当前坐标中心为基准点进行旋转,参数...

    Canvas之translate、scale、rotate、skew方法讲解!

    它的语法是`context.translate(x, y)`,其中x和y分别表示要移动的水平和垂直距离。当调用translate后,所有后续的绘图操作都会相对于新的参考点进行。例如,`context.translate(100, 50)`会将原点移动到(100, 50),...

    javascript结合Canvas 实现简易的圆形时钟.docx

    - `Canvas.Point(x, y)`: 定义一个表示点的构造函数。 ##### 4. 实现时钟类 - 定义时钟的各种属性,如半径、刻度长度等。 - 实现绘制圆心、背景、时针等功能的方法。 ##### 5. 绘制圆心 - 使用`translate()`进行...

    HTML5 Canvas网状焦点悬停放大动画特效

    首先,我们需要理解Canvas的基本用法。HTML5 Canvas是一个二维绘图上下文,通过JavaScript来操作。在HTML文档中,我们创建一个`<canvas>`标签,并通过JavaScript获取到这个元素的2D渲染上下文,例如: ```html ...

    H5 canvas制造3D旋转爱心表白

    ctx.bezierCurveTo(x + size * 0.5, y + size * 0.25, x + size * 0.5, y + size * 0.75, x - size * 0.5, y + size * 0.75); ctx.bezierCurveTo(x - size * 0.5, y + size * 0.25, x - size * 0.5, y - size * ...

    Android_Canvas_Demo

    4. **文本绘制**:`canvas.drawText(text, x, y, paint)`可以在指定位置(x, y)绘制文本,文本内容为text,Paint对象用于设置字体、颜色等。 5. **位图(Bitmap)**:除了直接绘制位图外,还可以使用`canvas.draw...

    HTML5 canvas纸片3D旋转动画.zip

    ctx.translate(x, y); // 移动到旋转中心 ctx.rotate(angle * Math.PI / 180); // 旋转指定角度 // 绘制图形 ctx.restore(); // 恢复原始状态 ``` 卷曲噪音动画则涉及到复杂的数学算法,如Perlin噪音或Simplex噪音...

    html5 canvas雪花动画特效.zip

    context.translate(this.x, this.y); context.rotate(this.angle); context.fillStyle = 'white'; context.fillRect(-this.size / 2, -this.size / 2, this.size, this.size); context.restore(); }; ``` 4. *...

    Canvas圆形万花筒动画效果.zip

    这可以通过`ctx.save()`和`ctx.restore()`来保存和恢复当前的绘图状态,以及使用`ctx.translate(x, y)`、`ctx.rotate(angle)`、`ctx.scale(x, y)`来改变坐标系统和图形的属性。 动画的实现则依赖于定时器(如`...

    HTML5 canvas实现带镜像效果的彩色粒子掉落动画特效源码.zip

    this.x = Math.random() * canvas.width; this.y = -20; this.speed = Math.random() * 2 + 1; this.color = 'hsl(' + Math.random() * 360 + ', 100%, 50%)'; } Particle.prototype.update = function() { ...

    HTML5 canvas制作圆形的万花筒动画效果

    在这个过程中,不仅可以学习到canvas的基本用法,还能加深对几何、矩阵变换以及JavaScript动画原理的理解。在实际项目中,可以根据需求进一步优化,比如添加触摸交互、渐变颜色、粒子效果等,以提升用户体验。

    Android canvas 放大 缩小 平移

    要实现放大和缩小,我们可以创建一个Matrix对象,然后调用其setScale()方法,传入缩放的X轴和Y轴因子。例如,要将图像放大两倍,可以这样设置: ```java Matrix matrix = new Matrix(); matrix.setScale(2f, 2f); ...

    canvas.image.manipulation

    ctx.rect(x, y, width, height); ctx.clip(); ctx.drawImage(img, 0, 0); ``` **图像缩放(Scaling):** 使用`scale()`方法可以对图像进行缩放。 ```javascript ctx.save(); // 保存当前状态 ctx.scale(scaleX, ...

    HTML5 canvas实现的平面旋转正方形内水浪动画效果源码.zip

    HTML5是现代网页开发的关键技术之一,其引入了许多新的...通过学习和理解这个压缩包中的源码,你可以深入了解canvas的基本用法,以及如何利用它来实现复杂的动画效果。这将有助于你提升在HTML5和Web开发领域的技能。

    html5 canvas自定义绘制多边图形代码

    context.translate(x, y); context.rotate(rotation * Math.PI / 180); // 旋转角度 for (var i = 0; i ; i++) { context.lineTo(radius * Math.cos(i * 2 * Math.PI / sides), radius * Math.sin(i * 2 * Math...

    基于html5 canvas绘制太空黑洞动画特效源码.zip

    var gradient = ctx.createRadialGradient(x, y, 0, x, y, radius); gradient.addColorStop(0, 'white'); gradient.addColorStop(1, 'black'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas....

    canvas 原位置旋转图片

    本文将详细讲解如何在Canvas上实现原位置旋转图片,并通过`translate`和`rotate`两个关键方法来理解这一过程。 首先,我们需要创建一个Canvas元素并在HTML中插入它: ```html <!DOCTYPE html> <title>Canvas ...

    HTML5 canvas宇宙黑洞动画代码.zip

    在HTML5 canvas上实现黑洞动画,需要理解几个关键概念:旋转(rotate)、平移(translate)和绘制路径(drawPath)。黑洞动画的核心是模拟物体被黑洞吸引并旋转进入黑洞的过程。这通常涉及到以下步骤: 1. **创建...

Global site tag (gtag.js) - Google Analytics