canvas总结:元素大小与绘图表面大小

前言

我们使用canvas的时候一般在canvas元素中直接设置它的width和height:

<canvas id="myCanvas" width="300" height="150">browser don‘t support canvas</canvas>

当然,也可以不在canvas中进行设置,直接在css样式中设置,因为canvas本身也是一个html节点

canvas{width:600px;height:300px}

设置以后,打开页面,发现canvas画布展示大小也ok,这个时候,我们在上面画一个40*40矩形,看下效果

var canvas = document.getElementById(‘canvas‘),
    context = canvas.getContext(‘2d‘);

context.fillStyle = ‘cornflowerblue‘;
context.fillRect(0, 0, 40, 40);

运行页面,展示如下

canvas大小为600px,高为300px,没有任何问题,符合预期。但是矩形...这显然不是40*40好吧,这是80*80

为什么会发生这种情况呢?

canvas的元素大小与绘图表面大小

canvas的大小分为两种,一个是canvas作为html元素本身的尺寸,另外一个canvas作为绘图容器的绘图表面大小。

在canvas元素中设置宽高,同时指定了canvas的元素尺寸以及绘图表面的尺寸,两者相等,绘图不会有任何问题

但如果使用css设置canvas高宽,其实只是指定了canvas的元素尺寸,而不会影响canvas的绘图表面的尺寸,如果两者尺寸是一致的,并不会产生什么问题,但如果不一致,就会出现各种奇怪的问题,这个时候浏览器会有自动缩放的机制,对绘图表面进行缩放,使之适应canvas元素的尺寸。

看我们前面的例子,canvas元素以及绘图表面的尺寸是300*150,但css中设置了canvas元素尺寸是600*300,实际矩形的绘制是在300*150的绘图表面中进行绘制的,绘制完成以后要显示在canvas元素中,需要进行缩放,故产生了图形变化的问题。

在前面的例子我们打印一下日志:

var box = canvas.getBoundingClientRect(); //canvas元素的边界框
console.log(canvas.width + "---" + canvas.height) //300-150
console.log(box.width + "---" + box.height); //600-300

其中canvas对象获取的其实是绘图表面大小,box获取的是canvas元素的大小

那缩放的规则是什么?

我们用几个例子来看一下

1. css中设置canvas元素600*300,绘图表面300*100,画矩形40*40

实际矩形80*120

宽度是预期的两倍,高度是预期3倍

2. Css中设置canvas元素600*300,绘图表面200*150,画矩形40*40

实际矩形120*80

宽度是预期的3倍,高度是预期的2倍

3. Css中设置canvas元素600*300,绘图表面1200*900,画矩形60*60

实际矩形30*20

宽度是预期的1/2,高度是预期的1/3

4. Css中设置canvas元素600*300,绘图表面1800*600,画矩形60*60

实际矩形20*30

宽度是预期的1/3,高度是预期的1/2

我们用element表示canvas元素,用canvas表示绘图表面,src表示绘制的内容,dest表示展示的内容,缩放规则为:dest.size = src.size * (element.size / canvas.size)

其它

其实不仅仅是大小缩放的问题,坐标也会偏移,在canvas中画圆,如果canvas元素与绘图表面的尺寸不一致,会发现实际展示的圆心位置并不是你指定的坐标,实际展示的坐标位置同样遵循上面所述的规则。

当然,解决这些问题非常简单,就是不要使用css来指定canvas元素大小,保持canvas元素尺寸与绘图表面尺寸的一致性

canvas总结:元素大小与绘图表面大小,布布扣,bubuko.com

时间: 2024-10-11 12:43:32

canvas总结:元素大小与绘图表面大小的相关文章

canvas元素大小与绘图表面大小

原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCanvas" width="300" height="150">browser don't support canvas</canvas> 当然,也可以不在canvas中进行设置,直接在css样式中设置,因为canvas本身也是一个html节点

R语言ggplot2绘图设置X轴刻度,字体大小及绘图区大小

> colnames(data1)[seq(2,ncol(data1), 15)]  [1] "AAAA" "AAGG" "ATGC" "ACGT" "AGGA" "TACG" "TTCC" "TCCT" "TGCA" "CATG" [11] "CTTC" "CCTT&qu

使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:section[0]: 获得html的dom元素 然后: 使用section[0].getBoundingClientRect来获取该元素的时时位置和大小

Android应用程序窗口(Activity)的绘图表面(Surface)的创建过程分析

文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8303098 在前文中,我们分析了应用程序窗口连接到WindowManagerService服务的过程.在这个过程中,WindowManagerService服务会为应用程序窗口创建过一个到SurfaceFlinger服务的连接.有了这个连接之后,WindowManagerService服务就可以为应用程序窗口创建绘图表面了,以便可以用来渲染窗口

牛牛有一个鱼缸。鱼缸里面已经有n条鱼,每条鱼的大小为fishSize[i] (1 ≤ i ≤ n,均为正整数),牛牛现在想把新捕捉的鱼放入鱼缸。鱼缸内存在着大鱼吃小鱼的定律。经过观察,牛牛发现一条鱼A的大小为另外一条鱼B大小的2倍到10倍(包括2倍大小和10倍大小),鱼A会吃掉鱼B。考虑到这个,牛牛要放入的鱼就需要保证: 1、放进去的鱼是安全的,不会被其他鱼吃掉 2、这条鱼放进去也不能吃掉其他鱼

牛牛有一个鱼缸.鱼缸里面已经有n条鱼,每条鱼的大小为fishSize[i] (1 ≤ i ≤ n,均为正整数),牛牛现在想把新捕捉的鱼放入鱼缸.鱼缸内存在着大鱼吃小鱼的定律.经过观察,牛牛发现一条鱼A的大小为另外一条鱼B大小的2倍到10倍(包括2倍大小和10倍大小),鱼A会吃掉鱼B.考虑到这个,牛牛要放入的鱼就需要保证:1.放进去的鱼是安全的,不会被其他鱼吃掉2.这条鱼放进去也不能吃掉其他鱼鱼缸里面已经存在的鱼已经相处了很久,不考虑他们互相捕食.现在知道新放入鱼的大小范围[minSize,max

Chromium硬件加速渲染的OpenGL上下文绘图表面创建过程分析

GPU命令需要在OpenGL上下文中执行.每一个OpenGL上下文都关联有一个绘图表面,GPU命令就是作用在绘图表面上的.不同用途的OpenGL上下文关联的绘图表面不一样,例如用于离屏渲染的OpenGL上下文关联的绘图表面可以用Pbuffer描述,而用于屏幕渲染的OpenGL上下文的绘图表面要用本地窗口描述.本文分析Chromium硬件加速渲染涉及到的OpenGL上下文及其联的绘图表面的关联过程. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 从前面Ch

修改帧大小和socket缓冲区大小(转)

修改帧大小和socket缓冲区大小 MTU (最大传输单元)的缺省值为1500. 通过下面命令将其改为9000(jumbo frame) % ifconfig eth0 mtu 9000 socket buffer size缺省为64 kB. 理论上,最优的buffer大小为<bandwidth>*<round-trip delay> 可以通过下列命令改变其大小(如256KB) % sysctl -w net.core.rmem_max=262144 :最大的接收缓冲区大小(tcp

Chromium网页绘图表面(Output Surface)创建过程分析

在Chromium中,Render进程在绘制网页之前,要为网页创建一个绘图表面.绘图表面描述的是网页经过渲染之后得到的输出.这个输出需要交给Browser进程处理,才能显示在屏幕上.在硬件加速渲染条件下,这个输出有可能是一个OpenGL纹理,也有可能是一系列需要进一步进行绘制的OpenGL纹理,取决于Render进程使用直接渲染器还是委托渲染器.本文接下来就对网页的绘图表面的创建过程进行详细分析. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 关于网页绘

设置全局导航栏颜色,标题大小和UIBarButtonItem字体大小

设置全局导航栏颜色,标题大小和UIBarButtonItem字体大小 在appdelegate里面设置 swift: UINavigationBar.appearance().barTintColor = UIColor.init(red: 47, green: 48, blue: 52) UINavigationBar.appearance().tintColor = UIColor.whiteColor() UINavigationBar.appearance().titleTextAttr