canvas-第1天基础和面向对象铺垫-

Canvas2d简介Canvas的背景2Canvas可以用JavaScript在上面是HTML5提供的一种元素：<canvas></canvas>Canvas是一个矩形区域，绘画，控制其每一个像素。canvas元素使用JavaScript在网页上绘制图像，本身不具备绘图功能。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。3Canvas的应用领域•可视化数据、数据图表banner模拟器

计算机控制图形编辑器多用于活动页面、特效完整的canvas移动化应用MAKE

IT

BETTER4Canvas的兼容性•版桌面浏览器，如chrome，firefox，opera和safari等，都是支持的。IE9及IE9以上的浏览器支持。的HTML代码会端大部分浏览器支持。如果不支持canvas，canvas被渲染。如：<canvas>你好，您的浏览器不支持Canvas。56Canvas的宽高属性Canvas用width和height属性指定画布内容的宽高–

单位只能是像素。其他单位值都会被忽略。CSS的width和height可以改变Canvas元素的宽高，但是其内容会被等比例拉伸。比如说，100x100的canvas如果设置了100x200的CSS宽高，那么其内容就会被拉伸。Canvas的width和height被变更时，Canvas上已有的任何绘图都会被清除。Context对象Context：Canvas的上下文、绘制环境。–

上下文：上知天文，下知地理。是所有的操作的

或者集合。Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的。Context对象就是JavaScript操作Canvas的接口。使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。canvas还支持WebGL的3D模式（ie11+）。78Canvas绘制路径Canvas的坐标系Canvas的坐标系以Canvas的左上角为(0,0)点。X轴以往右的方向为正方向，Y轴以往下的方向为正方向。(0,0)9xy10Canvas画线Context对象的“当前位置”。可以通过moveTo变更当前位置。可以用lineTo在当前位置和目标点之间连线。Stroke是什么？如何画出一根细线？（0.5法）路径的概念绘制时， 会先绘制出一个虚拟的路径。然后根据这个路径进行描边（stroke）或者填充（fill）。closePath可以将路径封闭起来，将起始点和终点相连接。beginPath会开启一个新的路径。clip可以剪切画板。（需要配合save,restore）路径填充时符合“非零环绕原则”1112矩形的绘制rect(x,y,width,height)函数绘制矩形路径。fillRect(x,y,weith,height)填充矩形。strokeRect(x,y,weith,height)描边矩形。clearRect(x,y,weith,height)清空矩形。13弧形的绘制/arccontext.arc(x,y,r,sAngle,eAngle,counterclockwise);参数xyrsAngleeAngleCounterclockwise描述圆的中心的x坐标。圆的中心的y坐标。圆的半径。起始角，以弧度计。。结束角，以弧度计。

可选。14弧形的绘制/arcTocontext.fillRect(x1,y1,x2,y2,r);创建两条切线之间的弧。选择起点、终点和半径绘制一个弧线。两条切线确定一个圆，这个函数绘制的，就是圆与两个切点之间的弧线。曲线的绘制二次方三次方曲线曲线

/jay-

dong/archive/2012/09/26/2704188.html15渐变色crea inearGradient(x1,y1,x2,y2)得到渐变。addColorStop(0,“black”)加入关键点。canvas区域内，全部都受到影响。1617线条与折线的设定线宽lineWidth线帽lineCap，指线段开始结束点的形状。butt（默认），round（圆形），square（方形）连接点lineJoin，指折线的转折点的绘制方法，，round（圆形），bevel（默认），miter（尖角）miterLimit，斜接线长度与二分之一线宽的比值，如果超过了改值，连接点会用bevel方式绘制。坐标变换/旋转，缩放，平移rotate，旋转scale，缩放translate，坐标系重新。（画布平移）1819文本的绘制设置字体、对齐、基线fillT