canvas宽高设置
canvas宽高设置
关于
canvas
宽高的设置,常见的方法有三种:1、直接设置<canvas>
标签的width
和height
属性;2、通过css样式进行设置;3、通过js设置<canvas>
标签的width
和height
属性。方法1和3是最有效的设置canvas
宽高的方法,它会让canvas
元素在页面中占据的宽高与画布的实际宽高一致;尽量避免使用方法2(通过css样式设置canvas
的宽高),它会让canvas
元素在页面中占据的宽高与画布的实际宽高不一致。具体对比如下:
三种设置canvas宽高方式的对比:
1、直接设置<canvas>
标签的width
和height
属性:
代码:
- html
<canvas class="canvas" width="500" height="500"></canvas>
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');// 验证canvas画布真正的宽高
ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
width
和height
的单位为px,设置属性的时候可以省略单位。
效果:
canvas元素在页面中占据的宽高与画布的真实宽高均为500px
2、通过css样式进行设置:
代码:
- html
<canvas class="canvas"></canvas>
- css
.canvas{width: 500px;height: 500px;background: #f44336;
}
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');// 验证canvas画布真正的宽高
ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
效果:
canvas元素在页面中占据的宽高虽然为500px,但是通过在画布上绘制半径为250px的圆验证得出画布的实际宽高并不是500px
3、通过js设置<canvas>
标签的width
和height
属性:
代码:
- html
<canvas class="canvas"></canvas>
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');
canvas.width = 500; // 设置宽度
canvas.height = 500; // 设置高度// 验证canvas画布真正的宽高
ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
width
和height
的单位为px,设置属性的时候可以省略单位。
效果:
canvas元素在页面中占据的宽高与画布的真实宽高均为500px
当三种方法同时存在时,会出现什么样的情况?
代码:
- html
<canvas class="canvas" width="200" height="200"></canvas>
- css
.canvas{width: 300px;height: 300px;background: #f44336;
}
- js
let canvas = document.querySelector('.canvas');
let ctx = canvas.getContext('2d');
canvas.width = 500; // 设置宽度
canvas.height = 500; // 设置高度// 验证canvas画布真正的宽高
ctx.beginPath();
ctx.arc(150, 150, 150, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();ctx.strokeStyle = '#ffeb3b';
ctx.beginPath();
ctx.arc(250, 250, 250, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
效果:
从效果图中可以看出,当三种方法同时存在时,通过js设置的宽高会覆盖直接在<canvas>
标签上设置的宽高属性,<canvas>
标签元素在页面中占据的大小是由css设置的宽高控制,但这并不意味着画布的真实宽高也为300px,通过在画布中绘制两个半径分别为150px和250px的圆,可以验证画布的真实宽高为500px,即通过js设置的宽高控制着画布实际宽高。上述效果可以理解为将宽高为500px的画布塞在宽高为300px的canvas
元素中。
总结:
1、通过width
和height
属性设置的宽高控制的是canvas
元素在页面中占据空间的大小和画布的大小;
2、通过css设置的宽高控制的是canvas
元素在页面中占据空间的大小,不是画布实际的大小;
3、通过width
和height
属性设置的宽高会使得canvas
元素在页面中占据空间的大小与画布大小一致;通过css设置的宽高则会导致canvas
元素在页面中占据空间的大小与画布大小不一致;
4、最有效的设置canvas
宽高的方式是通过js设置<canvas>
标签的width
和height
属性;
5、尽量避免使用css样式设置canvas
的宽高,因为它会让<canvas>
标签元素在页面中占据的宽高与画布的宽高不一致,使我们在绘制时出现意料之外的结果;
canvas宽高设置相关推荐
- IE6下div宽高设置
IE6下宽高设置.IE下div 中没有内容时,设置宽高不起作用,必须设置div背景色,并使用滤镜.才能使Div填充目标区域.多用于,其他容器元素使用背景图片,但是背景图片的部分需要其他的事件支持.如跳 ...
- 微信小程序 Video 播放视频,宽高设置
1. wxml文件 <view class="section"><video class= "videoCss" src='{{url}}' ...
- 微信小程序-图片宽高设置
微信小程序中,有很做组件都是有默认宽高的,比如,image组件默认宽度320px.⾼度240px,这些默认设置常常会对我们的页面布局造成影响 <!-- mode="widthFix&q ...
- HTML标签的宽高设置
标签的高度: 如果不设置那么由元素撑开,设置高度则为设置的高度,设置百分比则为父标签的百分比高度 标签的宽度: 块级标签:(block)每个标签单独占据一行,可以设置宽高,如果不设置高度则由内部元素撑 ...
- ios html5图片适配,ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题...
一.关于UIWebView 与 WKWebView 选取问题 从发布时间看:javascript 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0 ...
- 纯css 无视宽高设置垂直水平居中
flex的居中.(IE10+) .parent {display: flex;justify-content: center;align-items: center; } 复制代码 或 .parent ...
- A4纸网页打印——宽高设置
一.在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi . A4纸张的尺寸是2 ...
- 动态设置video的宽高的方法,js设置和CSS设置
一.csss设置 html: <div class="wrap"><video controls="controls" class=" ...
- Canvas动态改变宽高解决拉伸问题
之前开发模型渲染功能时,有一个特效是通过给目标canvas添加.修改filter属性实现.当时我发现一个问题:仅仅添加.修改filter一个属性后,canvas内容会被拉伸,导致滚动条出现(如下图,外 ...
最新文章
- 一篇文章搞定大规模容器平台生产落地十大实践
- 斯坦福大学2014机器学习教程中文笔记目录
- Redhat 5.1 install PHP 5.3.6
- jQuery.fn.load调用时给url加selector之后执行脚本的方法
- inner join on 加条件和where加条件_图解 SQL 中各种连接 JOIN
- ELK学习总结(1)——我们为什么要用ELK
- spring的自动装配(default-autowire=byName)
- 解决哈希冲突的三种方法(拉链法、开放地址法、再散列法)
- 去掉内容中的所有全部html标签。
- iOS:Autolayout自动布局实例
- B2B2C商城系统源码 多商户商城源码 Wap+App+小程序源码
- wap2.0技巧篇(转)
- 大学计算机计算思维期末试题及答案,大学计算机计算思维导论期末考试
- 大气压随温度变化表_【请求提供地球大气的气压和温度随高度变化的数据,最好提供曲线图.】作业帮...
- PowerDNS Authoritative Server 3.3 发布
- SDOI2015寻宝游戏
- 计算机考研和不考研的区别,考研和不考研有什么区别?问清楚自己考研动机
- PocketPC中汉字输入法分析与实现(…
- Deep Learning with Pytorch 中文简明笔记 第七章 Telling birds from airplanes: Learning from images
- 出售,2012年世界末日诺亚舟船票,绝密
热门文章
- 开放英语计算机考试,(荐)最新电大《英语I(1)》(开放英语1)完成句子、翻译题归纳汇总复习小抄.doc...
- OSChina 周五乱弹 —— 夏目不想上班,还想要甜甜的恋爱
- 西北农林科技大学考研计算机大纲,西北农林科技大学考研大纲
- 2021年上海互联网公司非官方排名
- 读完《筚路蓝缕——世纪工程决策建设记述》
- mysql explain参数_MySQL命令 Explain参数说明
- JavaScript的DOM知识点总结
- Flutter异常收集
- java中ofd文件转pdf_ofd格式如何转换成word
- nginx 极简教程