博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
canvas 绘图api的位置问题
阅读量:5872 次
发布时间:2019-06-19

本文共 1203 字,大约阅读时间需要 4 分钟。

很久没碰canvas了,今天因为canvas绘图的为之问题浪费了一些时间。

我们知道canvas的默认宽高是300X150嘛。

实际使用的时候当然是自定义一个高宽啦。

通常我们会习惯性地在js中通过canvasDom.style设置了某个高宽的时候,canvas在页面上也确实伸缩了。

但是用某些api的时候,传入位置参数时,还是按照300X150规格来处理位置的!如果想让位置居中的话,传入canvas.width/2或canvas.height/2就好了。

这是之前没留意过的问题,今天才发现。可怜我试错地在模拟器上反复折腾,确定真相的我眼前一黑。。。

想来是我孤陋寡闻了,今天又认识了一点点。

--------------------------------华丽分割线----------------------------------

然后我刚刚在外网informit.com看到一篇文章,关于canvas的:

    The difference between using CSS and setting canvas element attributes lies in the fact that a canvas actually has two sizes: the size of the element itself and the size of the element’s drawing surface.

    When you set the element’s width and height attributes, you set both the element’s size and the size of the element’s drawing surface; however, when you use CSS to size a canvas element, you set only the element’s size and not the drawing surface.

----、

大体意思是说:canvas这个元素其实有两种“尺寸”。一种是元素本身的大小。一种是其在绘图时画布的尺寸。

当我们只是改变它的css高宽时,元素在页面上的大小确实改变了。但是在绘图时候,它依旧是按照默认的300X150的规格来处理位置参数。

而如果我们通过canvas的html特性去改变它的宽高,则它的画布尺寸和元素大小都会相应改变。

呜呼,认识又多了一点。

然后试了下把canvasDom.style.xxx改成:

cc.setAttribute('width',w+'px');  cc.setAttribute('height',h+'px');

确实可以哦。

转载于:https://www.cnblogs.com/alan2kat/p/7455737.html

你可能感兴趣的文章
用 Flask 来写个轻博客 (30) — 使用 Flask-Admin 增强文章管理功能
查看>>
Spark MLib 数据类型
查看>>
ADO.NET的几大对象详解
查看>>
纠结的IE浏览器内存泄漏的测试
查看>>
理解契约式编程
查看>>
demo
查看>>
1132: 零起点学算法39——多组测试数据(a+b)
查看>>
1163: 零起点学算法70——Yes,I can!
查看>>
获取手机上安装的应用信息
查看>>
博客地址迁移
查看>>
html转义字符
查看>>
ruby require
查看>>
VS2012 ffmpeg 没有定义的lrint
查看>>
CodeForces 698A - Vacations (Codeforces Round #363 (Div. 2))
查看>>
复利计算器-结对编程1.1
查看>>
Intersection between 2d conic in OpenCASCADE
查看>>
java泛型中<?>和<T>有什么区别?
查看>>
jq中
查看>>
电脑异常关闭导致dubbo启动错误问题
查看>>
基本网络概念
查看>>