html5 canvas 自动改变宽高,H5 canvas中width、height和style的宽高区别详解
前言
最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧
Canvas 的width height属性
1、当使用width height属性时,显示正常不会被拉伸;如下
浏览器不支持Canvas,请升级或改用其它浏览器!
var canvas = document.getElementById("mycanvas"),
ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
运行效果如下,为对角线
2、使用style时图像会被拉伸(变形),
#mycanvas {
width: 150px;
height: 150px;
}
运行效果
如何理解???可以这么理解————
Canvas 是一个画板和一张画纸,画板相当于一个容器,画图/作业是在画纸上进行的,
画板和画纸的默认宽高是300*150,当画纸与画板宽高相等时,图像不会被拉伸,当画纸与画板宽高不一样时,图像就会被拉伸(变形)。
1, width 和 height 属性是设定画板和画纸的宽高,
如: width=”300” height=”300” 即画板的宽高是300*300,画纸的宽高也是300*300,作业的300*300 的对角线图像就不会被拉伸
2, style样式 里设定的是仅画板的宽高,画纸的宽高还是为默认值300*150,
(以上图为例)因此所作业的300*300的对角线图像仅有一部分画在画纸上,如下:
Btw 画纸不会让画板就这么空出一片,于是画纸连同图像就要一起拉伸到跟画板大小一样。在此例子当中,画纸宽与画板宽都为30,而高为画板的一半,因此只需将高拉伸一倍即可,so 图像也一起被拉伸变瘦,X方向不变,Y方向增至一倍, 所以就得到了变形之后的图片
关于HTML5中Canvas的宽、高设置问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸):
方法一:
方法二:使用HTML5 Canvas API操作 OK
var canvas = document.getElementById('欲操作canvas的id');
canvas.width = 500;
canvas.width = 500;
若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:
方法一:使用CSS 会被拉伸
#欲操作canvas的id{
width:1000px;
height:1000px;
}
方法二:使用HTML5 Canvas API操作 会被拉伸
var canvas = document.getElementById('欲操作canvas的id');
canvas.style.width = "1000px";
canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);会被拉伸
其它:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
html5 canvas 自动改变宽高,H5 canvas中width、height和style的宽高区别详解相关推荐
- html5实现贪吃蛇小游戏,H5 canvas实现贪吃蛇小游戏
本文介绍了h5 canvas实现贪吃蛇小游戏,分享给大家,具体如下: 实现效果如下 实现思路: ps:这个只是思路,详细可看代码注释 一.先把蛇画出来 定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇 ...
- dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
- java todataurl_利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
将图片转为base64的好处 将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地 ...
- linux mysql cpu 高,Linux系统中关于Mysql数据库导致CPU很高的问题解决
Linux系统中关于Mysql数据库导致CPU很高的问题解决 发布时间:2007-11-19 00:01:12来源:红联作者:spworks 服务器环境 Liunx AS4 + PHP5 + Mysq ...
- 金蝶云星空html5的网页主界面如何修改,金蝶云星空系统与嵌套网页进行交互实现详解...
金蝶云星空系统与嵌套网页进行交互实现详解 一.应用场景: 嵌套网页与金蝶云星空进行数据交互,例如:在被嵌套网页中,点击一个按钮,需要把数据发送到金蝶云星空系统当中,并且,星空系统接收发过来的数据,同时 ...
- linux modprobe自动加载,Linux运维知识之Linux modprobe自动处理可载入模块命令详解
本文主要向大家介绍了Linux运维知识之Linux modprobe自动处理可载入模块命令详解,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. modprobe(module p ...
- HTML5中新增的文件API和拖拽API详解
文件API 在HTML5之前的,从网页上传文件一次只能上传一个文件,而且也无法对要上传的文件做更深一步的操作. HTML5提供了一个系列关于文件操在的API,通过使用这些API,对于从Web页面访问本 ...
- HTML5新元素section和article的区别详解
HTML5带出了一系列新元素,并且将在未来被广泛应用.然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>. 在问答网站经常可以看到别人 ...
- 最有范儿的H5制作工具—应用之星之表单控件详解
H5页面在线制作平台大家应该都很熟悉了,它的出现使招聘.邀请.宣传都变得很精致.最近,应用之星也推出了H5页面制作,这个平台的功能很强大,不仅能做H5页面,还能制作App.其中,平台的表单控件功能具有 ...
最新文章
- TCP连接中TIME_WAIT连接过多
- 【GoLang】转载:我为什么放弃Go语言,哈哈
- 排除网络故障课后习题参考答案
- Linux配置IP常用命令
- python编码转换中文_python3如何中文转换编码?
- _Linux自编译云锁Web网站防火墙,看完小白也能保护网站安全
- 持久化数据结构(笔记)
- Oozie分布式任务的工作流——Sqoop篇
- Codeforces Round #288 (Div. 2)E. Arthur and Brackets
- Android消除Toast延迟显示
- 怎么管理员工混工时的现象?
- 计算机四级题库百度云资源,计算机四级题库
- ERD-ONLINE 2.0.3 免费在线数据库建模工具 正式发布
- PriorityQueue 改变排序方式,倒叙
- C#AE将当前地图导出为一张图片地图
- ictclas java 下载,10分钟开始使用ICTCLAS Java版
- yolo 算法中的IOU算法程序与原理解读
- Axi:名词解释、乱序、间插、卷绕、窄带访问、非对齐访问、OST
- CSP题目:小明种苹果树
- Base Device Behavior Specification V1.0(ZigBee Document 13-0402-13)