H5 canvas中width、height和style的宽高区别详解


Posted in HTML / CSS onNovember 02, 2018

前言

最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧

Canvas 的width height属性

1、当使用width height属性时,显示正常不会被拉伸;如下

<canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器!</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("mycanvas"),
        ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
</script>

运行效果如下,为对角线

H5 canvas中width、height和style的宽高区别详解 

2、使用style时图像会被拉伸(变形),

<style>
         
        #mycanvas {
            width: 150px;
            height: 150px;
        }
    </style>

运行效果

H5 canvas中width、height和style的宽高区别详解 

如何理解???可以这么理解————

Canvas 是一个画板和一张画纸,画板相当于一个容器,画图/作业是在画纸上进行的,

画板和画纸的默认宽高是300*150,当画纸与画板宽高相等时,图像不会被拉伸,当画纸与画板宽高不一样时,图像就会被拉伸(变形)。

1, width 和 height 属性是设定画板和画纸的宽高,

如: width=”300” height=”300” 即画板的宽高是300*300,画纸的宽高也是300*300,作业的300*300 的对角线图像就不会被拉伸

 H5 canvas中width、height和style的宽高区别详解

2, style样式 里设定的是仅画板的宽高,画纸的宽高还是为默认值300*150,

(以上图为例)因此所作业的300*300的对角线图像仅有一部分画在画纸上,如下:

H5 canvas中width、height和style的宽高区别详解 

Btw 画纸不会让画板就这么空出一片,于是画纸连同图像就要一起拉伸到跟画板大小一样。在此例子当中,画纸宽与画板宽都为30,而高为画板的一半,因此只需将高拉伸一倍即可,so 图像也一起被拉伸变瘦,X方向不变,Y方向增至一倍, 所以就得到了变形之后的图片

引用 //3water.com/html5/643939.html 的一段总结

关于HTML5中Canvas的宽、高设置问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸):
方法一:
       <canvas width="500" height="500"></canvas>
方法二:使用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会将百分值当成数值显示

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 #HTML / CSS
canvas像素画板的实现代码
Nov 21 #HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 #HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 #HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 #HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 #HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 #HTML / CSS
You might like
PHP语法速查表
2006/12/06 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php之Memcache学习笔记
2013/06/17 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
Laravel实现表单提交
2017/05/07 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Python 错误和异常小结
2013/10/09 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
应届生程序员求职信
2013/11/05 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
刑事申诉状范文
2015/05/20 职场文书
学校教代会开幕词
2016/03/04 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
MySQL 服务和数据库管理
2021/11/11 MySQL
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers