文档介绍：HTML5的Canvas开发让JavaScript飞的神奇画布Canvas2d简介Canvas的背景2什么是Canvas是HTML5提供的一种元素:<canvas></canvas>Canvas是一个矩形区域,我们可以用JavaScript在上面绘画,控制其每一个像素。canvas元素使用JavaScript在网页上绘制图像,本身不具备绘图功能。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。3Canvas的应用领域游戏可视化数据、数据图表banner广告模拟器远程计算机控制图形编辑器多用于活动页面、特效完整的canvas移动化应用MAKEITBETTER4Canvas的兼容性最新版桌面浏览器,如chrome,firefox,opera和safari等,都是支持的。IE9及IE9以上的浏览器支持。手机端大部分浏览器支持。如果不支持canvas,canvas标签内部的HTML代码会被渲染。如:<canvas>你好,您的浏览器不支持Canvas。</canvas>5Canvas的宽高属性Canvas用width和height属性指定画布内容的宽高单位只能是像素。其他单位值都会被忽略。CSS的width和height可以改变Canvas元素的宽高,但是其内容会被等比例拉伸。比如说,100x100的canvas如果设置了100x200的CSS宽高,那么其内容就会被拉伸。Canvas的width和height被变更时,Canvas上已有的任何绘图都会被清除。6Context对象Context:Canvas的上下文、绘制环境。上下文:上知天文,下知地理。是所有的操作的入口或者集合。Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的。Context对象就是JavaScript操作Canvas的接口。使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。canvas还支持WebGL的3D模式(ie11+)。7Canvas绘制路径8Canvas的坐标系Canvas的坐标系以Canvas的左上角为(0,0)点。X轴以往右的方向为正方向,Y轴以往下的方向为正方向。9(0,0)xyCanvas画线Context对象的“当前位置”。可以通过moveTo变更当前位置。o在当前位置和目标点之间连线。Stroke是什么?如何画出一根细线?()10