浅析canvas元素的html尺寸和css尺寸对元素视觉的影响


Posted in HTML / CSS onJuly 22, 2019

遇到的问题:canvas元素变形失真的原因

一个DOM元素存在三种尺寸:style尺寸,html尺寸,css尺寸。

使用canvas元素时,canvas元素默认宽高是300px * 150px。这里的默认尺寸是html尺寸。

为了更好地帮助理解,以作画为例。画板是css尺寸或者style尺寸,画布是html尺寸。

如果我们没有显示指定canvas元素的html尺寸,而在css文件中指定了它的css尺寸。结果是十分令人困惑。

例如我们在一个默认300px * 150px的画布上画了一个圆半径为50px的圆。

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>canvas尺寸</title>
    <style>
        #canvas {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div>
    <canvas id="canvas"></canvas>
</div>
<script>
    window.onload = function () {
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.strokeStyle = "#aaaaaa";
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
    };
</script>
</body>
</html>

最后显示的结果如下:

浅析canvas元素的html尺寸和css尺寸对元素视觉的影响

可以看出画布的尺寸确实是200 * 200。但是圆已经变成了椭圆,图形发生了形变。这是为什么呢?

如果移除css设定的尺寸又会怎么样呢?

浅析canvas元素的html尺寸和css尺寸对元素视觉的影响

可以看出此时图形是正常的。画布的尺寸确实是默认的300 * 150。

从对比以及想象中我们可以得出结论:

起初我们是在300 150的画布上绘制一个圆。绘制完成之后,我们又希望将画布的尺寸变成200 200,同时画布还是那块画布,不作更换。

可行的方法是将画布经行拉伸。假设画布存在弹性,那么一块画布从300 150拉伸成200 200。画布上的圆的长半轴变成原来的1.33倍,短半轴变成0.68倍。此时圆自然就是椭圆了。

结论:

在使用canvas画图的时候,为了避免不必要的麻烦,一定记得为canvas元素设定html尺寸的宽高。

总结

以上所述是小编给大家介绍的浅析canvas元素的html尺寸和css尺寸对元素视觉的影响,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 #HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 #HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 #HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 #HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 #HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 #HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 #HTML / CSS
You might like
yii框架配置默认controller和action示例
2014/04/30 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
JavaScript中string对象
2015/06/12 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
公务员的自我鉴定
2013/10/26 职场文书
老师给学生的表扬信
2014/01/17 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
个人培训总结
2015/03/05 职场文书
运动会观后感
2015/06/09 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
Spring实现内置监听器
2021/07/09 Java/Android
redis中lua脚本使用教程
2021/11/01 Redis
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python