标签：style color 使用 width html io
简单的说就是js+html5可以自定义绘制任何图形
<canvas id="canvas" width="500" height="500"> <!-- 不支持canvas的浏览器，这里会显示~~ --></canvas>
上面即是一个标准的Canvas的元素，暂时先当一个div去理解，只不过这个Canvas可以作图而已。
通过js去访问，这个js对象是你真正绘制图形的地方。
小提示：绘图使用js访问操作2D渲染上下文对象，最后通过Canvas这个元素展示出来，也就是说Canvas只是一个展示的作用！
如何设定自定义图形在页面上的位置？使用坐标系统，坐标系统的概念同js的offsetTop，offsetLeft一模一样，就是以电脑屏幕最左上角的那个像素作为原点（0,0），横向是x轴为第一个0，纵向是y轴为第二个0。
上面三个知识点够用了，马上实例操作
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>认识Canvas</title><body> <canvas id="canvas" width="500" height="500"> <!-- 不支持canvas的浏览器，这里会显示~~ --> </canvas></body></html><script>var canvas = document.getElementById(‘canvas‘);//获取canvas的dom元素var context = canvas.getContext(‘2d‘);//获得2d渲染上下文对象context.fillRect(0,0,800,800);//创建一个矩形,从左上角x轴0，y轴0的位置，绘制一个宽300，高200的矩形</script>
第14行很重要，获取2d对象，你可能会想到有没有3d，很抱歉，还没出来。
第15行fillRect方法绘制矩形用的，这里补充一下，关于颜色默认用的黑色填充内容，fillRect(x,y,width,height)。
小提示：假如Canvas的宽高数值比fillRect设置的数值小的话，那么fillRect的填充将会占满Canvas，溢出部分看不见的。就如同这里的Canvas宽高都是500像素，但是fillRect却是800像素，最终绘制出的只有Canvas当初设置的500像素的内容，溢出的300像素就不可见。
刷新页面你将可能到一个500像素的黑色色块，看起来效果应该不错吧？
好了，使用strokeRect替换fillRect，其他保持原样，再次刷新页面，看到了什么呢？动手试一试吧~
这两个函数参数都一样的，只是展示方式不一样~~
每天一点点，很多天就是很多点点~
Canvas基础认识,布布扣,bubuko.com
Canvas基础认识
标签：style color 使用 width html io
原文地址：http://www.cnblogs.com/dargon/p/3824938.html
