canvas 绘图api的位置问题
很久没碰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.
----http://www.informit.com/articles/article.aspx?p=1903884、
大体意思是说: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
canvas 绘图api的位置问题的更多相关文章
- Html5 学习系列(五)Canvas绘图API快速入门(2)
Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- Html5 学习系列(五)Canvas绘图API快速入门(1)
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- 引言:Canvas绘图API快速入门
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- Canvas绘图API
Canvas就是一个画布,可以进行任何的线.图形.填充等一系列的操作. Canvas的Context对象 要使用Canvas来绘制图形必须在页面中添加Canvas的标签 <canvas id=& ...
- canvas绘图——根据鼠标位置进行缩放的实现原理
以任一点 A 缩放的基本原理: A 点为鼠标位置,正常放大是以原点放大,那么放大后 A 点就会变到 A1 点的位置 x1, y1.然后再将画布进行位移,将 A1 的位置移动到 A,则完成以 A 点缩放 ...
- 有趣的Javascript:只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图(有演示demo)
该demo支持IE5以上任意内核的浏览器 查看演示demo:支持IE5以上版本的浏览器Canvas绘图demo 补充:chats.js和echarts等图表库也可以使用本方法兼容IE6以上浏览器 1. ...
- HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...
- canvas绘图、WebGL、SVG
目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...
随机推荐
- php设计模式总结
#1 使用设计模式(如建造者.外观.原型和模板模式)更快速.更有效地创建对象 #2 使用数据访问对象和代理设计模式分离体系结构 #3 使用委托.工厂和单元素设计模式改善代码流和控制 #4 在不修改对象 ...
- Nodejs开发微信公众号中控服务
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本项目旨在为多个微信公众号 ...
- matplotlib TransformNode类
TransformNode 是所有参与变换的类和所有需要无效自己或祖先的类的基类 方法: __init__(shorthand_name=None): 参数 [shorthand_name]: 别名 ...
- python数据类型及有关的实用函数
本系列例子使用python3.x, 编辑时间:2019-09-03,23:03:36 python以“对象引用”来存储数据,以对象来表达数据,每个对象都具有身份,对象和值. 实用函数: id(): 查 ...
- Struts2-学习笔记系列(7)-PreResultListener
在action处理完成之后,系统转入实际的物理试图之间被回调. Action,拦截器都可以添加该监听器.拦截器添加了该监听器后,该监听器会对该拦截器所有拦截的action其作用 public Stri ...
- scala_spark实践4
SparkStreaming中foreachRDD SparkStreaming是流式实时处理数据,就是将数据流按照定义的时间进行分割(就是“批处理”).每一个时间段内处理的都是一个RDD.而Spar ...
- java 字符串截取 - 最后带上mysql字符串截取比较
Java中的substring()方法有两个方法的重载,一个带一个参数的,一个带两个参数的. 第一种写法: substring(n);//从索引是n的字符开始截取,条件(n>=0,n<字符 ...
- 多级菜单初写(dict使用)
#!/usr/bin/env python3# -*- coding:utf-8 -*-# name:zzyumap = { "中国":{ "北京":{ &qu ...
- AJ学IOS(54)多线程网络之NSOperation重要知识
AJ分享,必须精品 一:队列的类型与队列添加任务 1: 主队列 [NSOperationQueue mainQueue] 添加到”主队列”中的操作,都会放到主线程中执行. 2:非主队列 [[NSOpe ...
- [总结]最近公共祖先(倍增求LCA)
目录 一.定义 二.LCA的实现流程 1. 预处理 2. 计算LCA 三.例题 例1:P3379 [模板]最近公共祖先(LCA) 四.树上差分 1. 边差分 2. 点差分 3. 例题 一.定义 给定一 ...