canvas的width和height设置问题
最近在学习canvas属性中遇到一个小问题，就是canvas的width和height设置问题
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#canvas{
width: 200px;
height: 200px;
background: #0f0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var c=document.getElementById('canvas');
var context=c.getContext('2d');。
context.moveTo(0,0);
context.lineTo(200,200);
context.stroke();
</script>
</body>
</html>
代码看上去没有问题，按照预想的话，应该会出现一个连接（0，0）和（200，200）两个坐标的斜线。
但结果是：
终点坐标直接指向了（100，200）的位置。
于是我尝试用
<canvas id="canvas" style="width: 200px;height: 200px;" >
去定义canvas，发现结果还是一样的。
当我不设置宽高时，发现canvas的宽高默认为300*150
我直接设置canvas的宽高属性：
<canvas id="canvas" width="200" height= "200" >
这样就没有问题了。
通过上述尝试我得出一些我的结论（错了勿喷）：
因为canvas自己有默认宽高，当用嵌入式或者内联式改变宽高时，canvas会按比例改变。可以看作连线是最开始进行的，此时连线是从（0,0）到（200,200）
但是因为200已经超过canvas的默认高度，所以在canvas中他的终点在（150，150）
所以改变canvas宽度为200之后，斜线终点仍然是宽度的一半，为（100，150）
同理，改变了canvas的高度，就只是高度改变而已，终点仍然是宽度的一半，为（100，200）
通俗的来讲就是把canvas和canvas中的斜线看成一个图片，无论如何拉伸，斜线始终指着底边终点。
然而如果设置canvas的宽高属性，就相当于把他的初始值改变了，那么就不会出现上面的问题。
canvas的width和height设置问题的更多相关文章
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
- canvas基础入门（一）canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- Canvas设置width与height 的问题！
最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...
- Canvas的width,height 和 样式中Canvas的width,height
控制Canvas的大小,有两种方式: 1:直接设置Canvas标签上的书width,height属性值; 2:通过Css设置Canvas的width,height; 这两种方式,区别是很大的. 1:C ...
- 初学canvas，遇到width和height显示问题和用excanvas.js兼容IE问题
/*-----------------------ITEYE 祈祷幸福博客原创,转载请注明.-------------------*/ 第一次认真写技术博客文~~~若有不严谨的地方,望指正. 今天是第 ...
- 转：Canvas标签的width和height以及style.width和style.height的区别
转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...
- 在canvas标签和style中定义width和height
在canvas标签中定义width.height跟在style中定义width.height是不同的.canvas标签的width和height是画布实际宽度和高度,就是在这个上面绘制图形.style ...
- H5_0009：关于HTML5中Canvas的宽、高设置问题
关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一: <canvas widt ...
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
随机推荐
- Android 8通过startService引起crash问题
Android 8.0 不再允许后台service直接通过startService方式去启动,否则就会引起IllegalStateException.解决方式: if (Build.VERSION.S ...
- B/s发展情况真的可以用日新月异来形容
做c/s也做b/s.从发展情况看,B/s发展情况真的可以用日新月异来形容,但确实也有些绕着路走的框架,不如delphi层次结构清晰. 如果前端用过angularjs等类似框架,则已经相当接近c/s的水 ...
- Bamboo 0.2.11 发布，HAProxy 自动配置
Bamboo 0.2.11 发布,此版本更新内容如下: 新特性 提供更多的模板字符串函数:strings.Split, strings.Join,strings.Replace, strings.T ...
- Delphi中无边框窗体应用程序使任务栏右键菜单有效的方法
最近在Delphi开发中用到了无边框窗体显示时,无法在任务栏使用右键弹出菜单的情况,经过整理,通过以下方法可以使右键菜单出现: procedure Tfrm_Base.InitSysMenu;var ...
- 快速删除mysql表中的数据
一.清空全部数据,不写日志,不可恢复,速度很快 truncate table 表名; 二.清空全部数据,写日志,可恢复,速度很慢 delete from 表名;
- 管理分布式session的四种方式。
应用服务器的高可用架构设计最为理想的是服务无状态,但实际上业务总会有状态的,以session记录用户信息的例子来讲,未登入时,服务器没有记入用户信息的session访问网站都是以游客方式访问的,账号密 ...
- ABP开发框架前后端开发系列---（12）配置模块的管理
一般来说,一个系统或多或少都会涉及到一些系统参数或者用户信息的配置,而ABP框架也提供了一套配置信息的管理模块,ABP框架的配置信息,必须提前定义好配置的各项内容,然后才能在系统中初始化或者通过接口查 ...
- git push 时：报missing Change-Id in commit message footer的错误
1. 一般而言,按照提示执行以下两个命令即可生成新的Change-id - gitdir=$(git rev-parse --git-dir); scp -p -P 29418 guan@192.16 ...
- java创建对象的方式
Java中创建对象的5种方式 作为Java开发者,我们每天创建很多对象,但我们通常使用依赖管理系统,比如Spring去创建对象.然而这里有很多创建对象的方法,我们会在这篇文章中学到. Java中有5种 ...
- Redis Ubuntu 安装
1.使用 root 用户登录 Ubuntu 2. wget http://download.redis.io/releases/redis-5.0.3.tar.gz 下载最新的稳定版本到 redis ...