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文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
随机推荐
- SqlServer批量压缩数据库日志-多数据库批量作业,批量备份还原
原文:SqlServer批量压缩数据库日志-多数据库批量作业,批量备份还原 --作业定时压缩脚本 多库批量操作 DECLARE @DatabaseName NVARCHAR(50) DECLARE @ ...
- ML:吴恩达 机器学习 课程笔记(Week1~2)
吴恩达(Andrew Ng)机器学习课程:课程主页 由于博客编辑器有些不顺手,所有的课程笔记将全部以手写照片形式上传.有机会将在之后上传课程中各个ML算法实现的Octave版本. Linear Reg ...
- QT 序列化/串行化/对象持久化
本文以一个实例讲解Qt的序列化方法: Qt版本 4.8.0 Qt序列化简介 Qt采用QDataStream来实现序列化,QT针对不同的实例化对象有不同的要求.这里主要分两类,即:QT中原生的数据类型, ...
- QML被系统缓存的原理是比较时间戳
Gunnar Roth January 25, 2017 at 17:07 Afaik the cached qml file contains a checksum of the original ...
- SYN6109型 NTP网络子钟
SYN6109型 NTP网络子钟 产品概述 SYN6109型NTP网络子钟是由西安同步电子科技有限公司精心设计.自行研发生产的一套通过网口与母钟连接的子钟,接收母钟发送来的时间信息(信息内容:年.月. ...
- Tuxera NTFS 2018 for Mac中文破解版 U盘读写软件-让你的Mac支持NTFS
下载链接(复制到浏览器下载):http://h5ip.cn/TLMc 软件介绍 给大家带来一款苹果Mac上如何使用U盘读写的软件,Tuxera NTFS 2018 for Mac中文破解版,Mac O ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- python自动化测试之mysql5.0版本数据库查询数据时出现乱码问题分析
1.确保数据库编码是utf8编码.若不是,请将my.ini的client,mysql,mysqld三个字段下面添加default-character-set = utf8,这样可以永久改变在新建数据库 ...
- 使用回调的方式实现中间件-laravel
$app = function ($request) { echo $request . "\n"; return "项目运行中....."; }; // 现在 ...
- 《收获，不止SQL优化》读书笔记
整体性能分析 AWR.ASH.ADDM.AWRDD 整体分析调优工具 AWR:关注数据库的整体性能的报告: ASH:数据库中的等待事件与哪些SQL具体对应的报告: ADDM:oracle给出的一些建议 ...