首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

画布中心0,0是左上角如何使它成为屏幕的中心?

要使画布中心0,0成为屏幕的中心,可以通过以下步骤实现:

  1. 获取屏幕的宽度(screenWidth)和高度(screenHeight)。
  2. 将画布的坐标原点(0,0)移动到画布的中心点(canvasCenterX = screenWidth / 2, canvasCenterY = screenHeight / 2)。
  3. 根据画布的中心点坐标,将屏幕坐标系中的左上角(0,0)移动到画布中心(screenX = canvasCenterX, screenY = canvasCenterY)。
  4. 将原始画布的绘制操作进行偏移,使得画布的内容以画布中心为基准进行绘制。

以下是具体的实现代码(JavaScript):

代码语言:txt
复制
// 获取屏幕的宽度和高度
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// 创建画布对象
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 将画布的坐标原点移动到画布的中心点
var canvasCenterX = screenWidth / 2;
var canvasCenterY = screenHeight / 2;
ctx.translate(canvasCenterX, canvasCenterY);

// 将屏幕坐标系中的左上角移动到画布中心
var screenX = canvasCenterX;
var screenY = canvasCenterY;
ctx.translate(-screenX, -screenY);

// 绘制操作(以画布中心为基准)
ctx.fillRect(-50, -50, 100, 100); // 示例绘制一个矩形

请注意,上述代码仅为示例,实际情况中需要根据具体的开发环境和要求进行相应的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Canvas类的最全面详解 - 自定义View应用系列

简介 定义:画布,是一种绘制时的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容时的规则 & 内容 1. 记住:绘制内容是根据画布的规定绘制在屏幕上的 2....理解为:画布只是绘制时的规则,但内容实际上是绘制在屏幕上的 ---- 2....Canvas的本质 请务必记住: 绘制内容是根据画布(Canvas)的规定绘制在屏幕上的 画布(Canvas)只是绘制时的规则,但内容实际上是绘制在屏幕上的 为了更好地说明绘制内容的本质和Canvas,...总结 绘制内容是根据画布的规定绘制在屏幕上的 内容实际上是绘制在屏幕上; 画布,即Canvas,只是规定了绘制内容时的规则; 内容的位置由坐标决定,而坐标是相对于画布而言的 注...:位移是基于当前位置移动,而不是每次都是基于屏幕左上角的(0,0)点移动 ?

3.2K81

Carson带你学Android:自定义View Canvas类使用教程

简介 定义:画布,是一种绘制时的规则 是安卓平台2D图形绘制的基础 作用:规定绘制内容时的规则 & 内容 记住:绘制内容是根据画布的规定绘制在屏幕上的 理解为:画布只是绘制时的规则,但内容实际上是绘制在屏幕上的...Canvas的本质 请务必记住: 绘制内容是根据画布(Canvas)的规定绘制在屏幕上的 画布(Canvas)只是绘制时的规则,但内容实际上是绘制在屏幕上的 为了更好地说明绘制内容的本质和Canvas,...总结 绘制内容是根据画布的规定绘制在屏幕上的 内容实际上是绘制在屏幕上; 画布,即Canvas,只是规定了绘制内容时的规则; 内容的位置由坐标决定,而坐标是相对于画布而言的 注:关于对画布的操作(缩放...:位移是基于当前位置移动,而不是每次都是基于屏幕左上角的(0,0)点移动 b....缩放(scale) 作用:放大 / 缩小 画布的倍数 具体使用: // 共有两个方法 // 方法1 // 以(px,py)为中心,在x方向缩放sx倍,在y方向缩放sy倍 // 缩放中心默认为(0,0)

2.4K10
  • 自定义控件详解(三):Canvas效果变换

    paint);    从下可见绿色框的是平移(100,100)后的新画布的位置,多出界面的部分不再显示    黑色的矩形是在新的画布位置(绿色框)左上角为原点,(100,100)位置绘制的 ?...//绘制一个宽300 高200 的矩形 ,因为画布向右平移了120px,向下平移了120px, // 所以这时距屏幕左上角的距离为(100+120,100+120) canvas.drawRect...,会发现这个蓝色矩形是在原状态画布上绘制的。...,正数是顺时针旋转,负数指逆时针旋转,它的旋转中心点是原点(0,0) 第二个构造函数除了度数以外,还可以指定旋转的中心点坐标(px,py) Paint paint = new Paint...缩小一半 paint.setColor(Color.BLACK); //绘制一个宽300 高200 的矩形 ,因为画布向右平移了120px,向下平移了120px, // 所以这时距屏幕左上角的距离为(

    85650

    带你玩转自定义view系列

    在Android中,将屏幕最左上角的顶点作为Android坐标系的原点,从原点向右是X轴正方向,从原点向下是Y轴正方向: ?...只不过在视图坐标系中,原点不再是 Android 坐标系中的屏幕左上角,而是以父视图左上角为坐标原点。 ?...translate translate是对坐标系的平移,且是可以多次重叠的,默认是在屏幕的左上角(0,0)。...//恢复画布后,坐标原点(0,0)默认在屏幕左上角, //即以屏幕左上角为坐标原点在(100,100)为圆心处绘制蓝色圆 paint.setColor(Color.BLUE);...pathrLineTo(float dx, float dy) //基于当前坐标系,即以path最后的那个点//为坐标系原点(0,0),如果前面没有path的点,默认是屏幕左上角(0,0) 注:lineTo

    1.6K20

    Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

    基础知识一:OpenGL的坐标系 为方便讲解,以下只讲解二维的情况,在OpenGL使用中,我们主要会涉及到以下三个坐标系: 屏幕坐标系 屏幕坐标系就是我们手机屏幕的坐标系,以像素为单位,左上角是坐标系原点...,即(0,0),x的取值范围为0~屏幕宽度,y的取值范围为0~屏幕高度,详见下图: ?...因为OpenGL默认是渲染到屏幕的,我们往画布上画东西并不希望马上显示出来,因为画布还要贴到脸上,之后再显示出来。 坐标变换 有了涂鸦画布之后,下一步就是如何将涂鸦的内容画到画布上。...继续沿用之前的例子,前面是得到了触摸点在相机预览画面中的坐标是(200,400),它如何对应到涂鸦画面上面呢?...这里的方法是先计算触摸点相对于人脸鼻尖的位置,因为涂鸦画布是将画布中心对准了人脸鼻尖位置,所以再通过算出来的相对位置转换成涂鸦画布上的对应位置,以保证它在涂鸦画布上还是手指触摸的那个地方。

    7.3K130

    用Python也能画图?用Python来画个“python”

    保留字是在语言已经定义过的字,使用者不能把这些字作为变量名或过程名使用;而关键字是在语言中有特定含义的,成为语法中一部分的那些字。...在我们电脑的屏幕中,最左上角的位置便是(0,0),在画布空间中亦是如此。如果我们自己不设置窗口的位置,那么它会自动默认为在电脑屏幕中间的位置。...所以上面语句我们可以理解为在电脑屏幕中生成一个宽度为650像素,高是350像素,窗体的左上角在电脑屏幕中(200,200)的位置。...在画布窗口这个窗口中,它也是有坐标来规范的,在这个窗口的坐标体系中,有绝对坐标和海龟坐标两种。在绝对坐标中,海龟在窗口的正中心,那么正中心的坐标就为(0,0),海龟的头向着窗口的右侧。如图: ?...如图小编做了一个例子,下图中划有圈圈的地方为坐标原点(0,0),我们可以看到海龟(实际上看到的是个点)从中心位置出发,顺着箭头到达最终指向的坐标。 ? 那么海龟运动的方向又是咋样的呢?

    1.5K50

    python之turtle海龟绘图篇

    大家好,又见面了,我是你们的朋友全栈君。 海龟绘图 python2.6版本中后引入的一个简单的绘图工具,叫做海龟绘图(Turtle Graphics),出现在1966年的Logo计算机语言。...画布(canvas) 画布就是turtle为我们展开用于绘图区域, 我们可以设置它的大小和初始位置 设置画布大小: turtle.screensize(canvwidth=None, canvheight...(startx, starty): 这一坐标表示 矩形窗口左上角顶点的位置, 如果为空,则窗口位于屏幕中心 如: turtle.setup(width=0.6, height=0.6) turtle.setup...画笔 使用Pen()设定海龟画图对象,即画笔:turtle.Pen() 代码执行后就建立了画布,同时屏幕中间可以看见箭头(arrow),即所谓的海龟 在海龟绘图中,海龟的起点即画布中央为 (...0,0),移动单位是像素 (pixel) 描述海龟时使用了两个词语:坐标原点(位置),面朝x轴正方向(方向), turtle绘图中, 就是使用位置方向描述海龟(画笔)的状态 3.绘图命令 操纵海龟绘图有着许多的命令

    3.5K10

    Android图形图像处理:canvas的save()和restore()函数详解

    在Android图形图像处理中,canvas.save();和canvas.restore();是成对出现的,作用是用来保存画布的状态和取出保存前的状态。...比如当我们对画布进行平移旋转等操作时,有时我们只是想对特定的元素进行操作,比如图片,一个矩形,但是当你用canvas的方法来进行这些操作的时候,其实是对整个画布进行了操作,那么之后在画布上的元素都会受到影响...,所以一般我们在操作之前调用canvas.save()来保存画布当前的状态,当操作之后调用canvas.restore()取出之前保存过的状态,这样就不会对其他的元素产生影响 首先,先上代码: Paint...注意:rotate默认的旋转中心是(0,0)。把代码中的注释去掉再运行,从下图可以知道绿色正方形以(0,0)为旋转中心顺时针旋转45°后的样子。 ?...旋转以后相对于旋转后的canvas,它的左上角的坐标依然是(10,10),但是相对于原canvas则是(0, 10√2)

    2.3K40

    【Python实用工具】(情人节献礼)turtle函数绘制动态玫瑰花

    Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x、纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的路径上绘制了图形...画布(canvas) 画布就是turtle为我们展开用于绘图区域,我们可以设置它的大小和初始位置。...,(startx, starty): 这一坐标表示矩形窗口左上角顶点的位置, 如果为空,则窗口位于屏幕中心。...画笔 2.1 画笔的状态 在画布上,默认有一个坐标原点为画布中心的坐标轴,坐标原点上有一只面朝x轴正方向小乌龟。...2.3 绘图命令 操纵海龟绘图有着许多的命令,这些命令可以划分为3种:一种为运动命令,一种为画笔控制命令,还有一种是全局控制命令。 3.

    1.2K30

    HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    练习: a、模拟钟表的时,分,秒 b、模拟水波,一个黑色的屏幕,多个从中心随机产生彩色的圈不断的放大,接触到屏幕结束。...WebGL完美地解决了现有的Web交互式三维动画的两个问题: 第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持; 第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的...SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。 ?...4.超强显示效果 SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。...SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题,另一个问题就是SVG的本地运行环境下的厂家支持程度。

    9.6K100

    28.QT-QPainter介绍

    介绍 可以在QPaintDevice类上绘制各种图形 QPaintDevice类表示QPainter的绘图设备(画布) QpaintDevice子类有QImage、QOpenGLPaintDevice、...需要注意的是: Qpainter的坐标是使用的窗口坐标(逻辑坐标) 当QPainter初始化时,视口和窗口坐标默认是相同的,也就是说原点(0,0)在于窗口左上角 所以视口和窗口的最小坐标和最大坐标是从左上到右下的...示例1-设置原点(0,0)为窗口的(100,100),设置绘画区域为窗口大小为100*100 如下图所示,其中蓝色为视口坐标,红色为窗口坐标: ?...由于数学Y坐标方向与屏幕Y坐标方向是相反的,所以w保持不变,h = -height 所以对应代码为: QPainter painter(this); QSize ViewWH(100,100...示例2-在窗口的中心处绘制正弦波 QPainter painter(this); painter.setViewport(50,50,width()-100,height()-100); //设置视口为中心处

    1.8K20

    在编程中发现数学之美——使用python和Processing绘制几何图形

    在传统的几何数学中,原点一般在图像的中心位置。 ? 然而在计算机图形中,坐标系统与传统的几何系统不一样。计算机图形系统中的原点,在屏幕的左上角,x和y随着屏幕向右向下而增加。 ?...) 你在size中声明的参数将成为画布的宽度和高度。...注意原点仍然被标记为(0,0),实际上我们并没有移动原点,只是移动了整个坐标系,这样把原点移动到屏幕中央来了。 使用rotate旋转对象 在几何中旋转表示将一个物体围绕着一个中心转动。...这是因为processing默认定位矩形是定位在它的左上角,旋转也是围绕着左上角。...还需要找到这个等边三角形的中点,使三角形围绕着它的中心旋转。要实现这些,我们需要确定等边三角形的三个顶点的坐标。想一想,在确定一个等边三角形的中心之后,如何绘制这个等边三角形?

    6.5K11

    HTML5(六)——Canvas 高级操作

    translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。...,默认原点是画布的起始点,我们想要的旋转是在矩形框中心为原点的旋转,此时我们需要借助上translate平移,重置一下原点,修改上述代码为: <canvas width="400" height="400...(伸展或缩小图像) eg:利用语法3,进行绘制图片的部分内容,实现如下效果: 给上述兔子顺便加一个点击屏幕暂停开始功能,完整代码如下: 的图像数据矩形区域的左上角 y 坐标。...x ImageData 对象左上角的 x 坐标,以像素计。 y ImageData 对象左上角的 y 坐标,以像素计。 dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。

    1.2K30

    HTML5(六)——Canvas 高级操作

    translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。...,默认原点是画布的起始点,我们想要的旋转是在矩形框中心为原点的旋转,此时我们需要借助上translate平移,重置一下原点,修改上述代码为: <canvas width="400" height="400...(伸展或缩小图像) eg:利用语法3,进行绘制图片的部分内容,实现如下效果: 给上述兔子顺便加一个点击屏幕暂停开始功能,完整代码如下: 的图像数据矩形区域的左上角 y 坐标。...x ImageData 对象左上角的 x 坐标,以像素计。 y ImageData 对象左上角的 y 坐标,以像素计。 dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。

    1.3K30

    【Flutter 绘制技巧】Path 路径变换

    本文来探讨一下路径的变换,我们知道 Canvas 本身也支持变换,那 Path 的变换有什么必要性吗?和 Canvas 变换又有什么区别呢?如何在一次变换中叠加多种变换效果,如何修改变换中心?...绘制路径测试 如下,通过 PathPainter 作为画板,绘制如下图案:左上角是一个三角形路径。坐标系以画布中心为原点,右和下方为正方向,只起到辅助查看作用。...此时画布的原点仍在屏幕左上角,如下浅蓝色区域: ---->[extra_03_path/02]---- Path path = Path() ..moveTo(size.width/2, size.height...另外有个非常重要的注意点,如果是对 Path 进行处理,它的真实位置是发生变化的,对 canvas 进行变换,Path 的真实位置不变。...可以看出,默认情况下,是以屏幕左上角为变换中心的。

    1.3K10

    我做了一个在线白板!!!

    其实我们鼠标是在另一个世界,这个世界的坐标原点在左上角,而前面我们把画布世界的原点移动到中心位置了,所以它们虽然是平行世界,但是奈何坐标系不一样,所以需要把我们鼠标的位置转换成画布的位置: const...,我们要的是矩形以自身中心进行旋转,动图里明显不是,这其实是因为canvas画布的rotate方法是以画布原点为中心进行旋转的,所以绘制矩形时需要再移动一下画布原点,移动到自身的中心,然后再进行绘制,这样旋转就相当于以自身的中心进行旋转了...,我们不妨把鼠标指针的坐标以矩形中心为原点反向旋转矩形旋转的角度: 好了,问题又转化成了如何求一个坐标旋转指定角度后的坐标: 如上图所示,计算p1以O为中心逆时针旋转黑色角度后的p2坐标,首先根据p1...,世界这么大,它想去看看,确实,屏幕就这么大,矩形肯定早就待腻了,作为万能的画布操控者,让我们来满足它的要求。...,无论怎么滚动缩放旋转,矩形的x、y本质都是不变的,没办法,转换吧: 同样是修改鼠标的clientX、clientY,先把鼠标坐标转成画布坐标,然后缩小画布的缩放值,最后再转成屏幕坐标即可: const

    3.6K31

    python之画图

    今天做的是用python实现画图,画出你想要的图案,只要你的想象力足够丰富,以及能够合理的运用这个turtle模块,基本可以画出你想要的东西出来。...而且如果真要看turtle的画笔的效果的话,用python自带的idea来编写会比较方便,只要输入了画笔的高度就会出现画笔的窗口了,而且你每添加他会跟着变化 ? 一般的话,你要想设置画布。...这样就可以将画布修改为100x100的大小,自己按需设置了, setup函数的变量有,width,height,startx,starty四个。 后面两个就是窗口在桌面的位置了 ?...需要注意的是,在turtle中画笔的初始点就是(0,0)而不是像桌面那样子从左上角的位置为(0,0)然后想移动起始点的话就加一个penup() 然后接着用goto(x,y)来设置,x,y就是以初始点为中心的...可能最需要注意的就是记得penup()和pendown(),还有的就是goto()里的数据一直都是以中心为(0,0)的即使移动到别的地方后还是相对于那个中心点来设置坐标的。

    1.9K31

    Python3 turtle安装和使用教

    Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x、纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行的路径上绘制了图形...2 基础概念 2.1 画布(canvas) 画布就是turtle为我们展开用于绘图区域, 我们可以设置它的大小和初始位置。 常用的画布方法有两个:screensize()和setup()。...(startx, starty):这一坐标表示 矩形窗口左上角顶点的位置, 如果为空,则窗口位于屏幕中心 如: turtle.setup(width=0.6, height=0.6) turtle.setup...(width=800, height=800, startx=100, starty=100) 2.2 画笔 在画布上,默认有一个坐标原点为画布中心的坐标轴, 坐标原点上有一只面朝x轴正方向小乌龟。...turtle是否可见 stamp() 复制当前图形 turtle.write(s[,font=("font-name",font_size,"font_type")]) 写文本,s为文本内容,font是字体的参数

    6K10
    领券