浅析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 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php统计文章排行示例
2014/03/04 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP实现百度人脸识别
2019/05/06 PHP
php实现文件上传基本验证
2020/03/04 PHP
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python中的yield浅析
2014/06/16 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
应届护士求职信范文
2014/01/26 职场文书
公司请假条范文
2014/04/11 职场文书
情况说明书格式范文
2014/05/06 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android