首页
学习
活动
专区
工具
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)点移动 ?

3K81

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

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

2.3K10
  • 自定义控件详解(三):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, // 所以这时距屏幕左上角距离为(

    84050

    带你玩转自定义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.0Android相机实时图片涂鸦实现思路

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

    7.1K130

    使用pythonturtle函数绘制一个滑稽表情

    Turtle库Python语言中一个很流行绘制图像函数库,想象一个小乌龟,在一个横轴为x、纵轴为y坐标系原点,(0,0)位置开始,根据一组函数指令控制,在这个平面坐标系中移动,从而在爬行路径上绘制了图形...turtle绘图基础知识: 1. 画布(canvas) 画布就是turtle为我们展开用于绘图区域,我们可以设置大小和初始位置。...设置画布大小 turtle.screensize(canvwidth=None, canvheight=None, bg=None),参数分别为画布宽(单位像素), 高, 背景颜色。...turtle.setup(width=0.5, height=0.75, startx=None, starty=None),参数:width, height: 输入宽和高为整数时, 表示像素; 为小数时, 表示占据电脑屏幕比例...,(startx, starty): 这一坐标表示矩形窗口左上角顶点位置, 如果为空,则窗口位于屏幕中心

    2.3K10

    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.2K10

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

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

    1.4K50

    Android图形图像处理:canvassave()和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)

    1.8K40

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

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

    1.2K30

    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.1K11

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

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

    9.5K100

    HTML5(六)——Canvas 高级操作

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

    1.2K30

    HTML5(六)——Canvas 高级操作

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

    1.2K30

    【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.6K30

    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

    Android Canvas drawText文字居中一些事(图解)

    2.绘制一段文本 首先把坐标原点移动到控件中心(默认坐标原点在屏幕左上角),这样看起来比较直观一些,然后绘制x、y轴,此时原点向上y为负,向下y为正,向左x为负,向右x为正,以(0,0)坐标开始绘制一段文本...: x:绘制文本起始x坐标 y:绘制文本baseline在y轴方向位置 有点难理解,举个栗子,上文中x、y参数传0,0),此时baseline正好坐标系中x轴,就相当于从y轴开始向右绘制...3.绘制居中文本 在上文中,我们学习了如何绘制一段文本,以及其中参数和坐标的含义,接下来进入正题,看下如何才能绘制居中文本。...,所以公式最终为: float baseLineY = Math.abs(paint.ascent() + paint.descent()) / 2; 注意:此公式相对于坐标原点在控件中心来计算...,如果坐标原点在左上角,baseLineY需要加上控件高度一半。

    2.9K20
    领券