canvas学习：绘制图形1(canvas尺寸)

canvas元素定义好之后，可以在其中绘制很多内容，图片，文字，更有人们都喜欢的动画！

首先使用最简单的矩形来练练手吧！

html代码：

<canvas id="mycanvas"></canvas>

css代码：

#mycanvas{width:400px;height:400px;border:1px solid #000}

js代码：

<script>
var mycanvas= document.getElementById("mycanvas");
var ctx =mycanvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
ctx.fillStyle="#ccc";
ctx.fillRect(10,10,50,50);//此处数值没有单位
</script>

效果图：



理想的效果图应该是这样的：

原因

简直太奇怪了，一看呢大约能猜到是单位的问题，可是左右测试将px加上减去的反复操作也没能解决问题，绘图ctx.fillRect(10,10,50,50);好像是一个比例，到底是什么原因呢，终于在网上查到了一个关键的知识点：canvas元素大小与canvas绘图表面大小 ；

canvas元素实际上有两套尺寸。一个是元素本身的大小，还有一个是元素绘图表面（drawing surface）的大小

html中单独写时，默认值为：

canvas元素本身尺寸： 300px,150px;
canvas绘图表面尺寸：300,150; //注意，canvas绘图尺寸没有单位

使用html代码定义canvas尺寸时：

<canvas id="mycanvas" width="400px" height="400px"></canvas>  //同时定义canvas元素本身尺寸和绘图表面尺寸

单独使用css定义尺寸时：

#mycanvas{width:400px;height:400px;}//只能定义元素本身尺寸，不能定义绘图表面尺寸

可见，若是只用css来定义canvas尺寸，则绘图尺寸还是默认的300*150，这个时候绘图尺寸与元素尺寸不相符，效果图就出现了变形；那么图形是如何变化的，可以如下来理解：

1 、首先元素尺寸有单位，是px；而绘图尺寸没有单位，默认情况下元素尺寸是300px*150px，绘图尺寸宽度300得到的实际长度应当为：300份 平分 元素尺寸的300px（每一份长度为1px）；

2 、当绘图尺寸与元素尺寸不相符的时候，比如元素尺寸为400px*400px，默认绘图尺寸为300*150，这个时候则是如下状况：

宽度将400px分成300份，每一份得到的像素值是 (400/300)px，

高度400px 划分成150份，每一份得到的像素值是 (400/150)px，

命令 ctx.fillRect(10,10,50,50) 得到的实际宽度与高度分别是：

宽度：400px/300 * 50 = (200/3)px

高度：400px/150 * 50 =(400/3)px

综上，所以出现了上面的奇怪效果！原来计算机还是没有毛病，有问题的是自己不够理解他。（每次出现问题找不到答案，没办法时就想去 怪计算机 脑子出毛病了>.<，事实上最后总会得到一个残忍的结果，那就是脑子出毛病的是自己 ：_：）

解决方法：

html中定义canvas标签宽度和高度;

js中写下如下代码：

mycanvas.height=400;

mycanvas.width=400;

总结：

canvas有两套尺寸，搞明白其中原理，可以根据需要放大缩小图案；但是一般绘图尺寸是和元素尺寸相匹配的，这样可读性好，方便其他人阅读理解；

将尺寸写在html中，是解决上面问题的最简单方法；

书写时一个带单位，一个不带单位；

画图时js代码书写的是绘图尺寸，不写单位；css中定义的是元素尺寸；html中是两个尺寸同步定义；