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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
用HTML5制作数字时钟的教程
May 11 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
浅谈Javascript事件模拟
2012/06/27 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
ionic3 懒加载
2017/08/16 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python-基础-入门 简介
2014/08/09 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
Python字符串详细介绍
2015/05/09 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python内存管理实例分析
2019/07/10 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python绘制股票移动均线的实例
2019/08/24 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python中的Cookie模块如何使用
2020/06/04 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
有机童装:Toby Tiger
2018/05/23 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
2014年工会工作总结
2014/11/12 职场文书
入党政审材料范文
2014/12/24 职场文书
重阳节简报
2015/07/20 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers