HTML5高级工程师之canvas范例.pptx

Canvas 后盾网 2011-2015 后盾网 人人做后盾 什么是canvas： ? canvas 标签定义图形，比如图表和其他图像。 ? canvas 标签只是图形容器，您必须使用脚本来绘制图形。 ? canvas 其实对于HTML来说很简单，只是一个标签元素而已，自己并没有行为，但 却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制 到一块画布上，拥有绘制路径，矩形，圆，字符以及图像等功能。 所有的标签只是 图形的容器，必须使用JavaScript的 API 操作绘图。 标签： canvas id=“canvas” width=“500” height=“500”/canvas getContext ? 返回一个用于在画布上绘图的环境 script type=text/javascript c = document.getElementById(canvas); obj = c.getContext(2d); /script 什么是canvas 后盾网 人人做后盾 矩形 context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height) context.clearRect(x,y,width,height) 像素 canvas方法或属性 后盾网 人人做后盾 绘制“被填充”的矩形 绘制矩形（无填充） 在给定的矩形内清除指定的 颜色、样式 context.fillStyle=‘#f00f00’ context.strokeStyle=‘green’ ? ? 设置或返回填充绘画的颜色、渐变或模式 设置或返回笔触的颜色、渐变或模式 context.lineWidth=10 设置或返回当前的线条宽度 context.lineJoin=“边界类型” bevel:斜角,round:圆角,miter:尖角 路径 beginPath() closePath() moveTo(x,y) lineTo(x,y) fill() stroke() canvas方法或属性 后盾网 人人做后盾 开始一条路径，或重置当前路径 创建从当前点回到起始点的路径(闭合路径） 把路径移动到画布中的指定点，不创建线条 添加一个新点，创建从该点到最后指定点的线条 填充当前绘图（填充路径） 绘制已定义的路径（连线路径） 封闭状态 save() restore() 保存当前环境的状态 返回之前保存过的路径状态和属性 画布控制 画布控制 后盾网 人人做后盾 context.scale(scalewidth,scaleheight) context.translate(x,y) context.rotate(angle) 为圆心旋转 缩放处理 1=100% 图形位置处理 旋转画布,单位：弧度，默认以画布 画圆 context.arc(x,y,r,sAngle,eAngle,counterclockwise) 创建弧/曲线（用于创建 圆形或部分圆） 参数说明： canvas方法或属性 后盾网 人人做后盾 x y r sAngle 圆的中心的 x 坐标。 圆的中心的 y 坐标。 圆的半径。 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 eAngle counterclockwise 结束角，以弧度计。 可选。False = 顺时针，true = 逆时针。 弧度计算公式： 角度*Math.PI/180 canvas id=canvas width=300 height=300/canvas script type=text/javascript c = document.getElementById(canvas); obj = c.getContext(2d); obj.lineWidth = 10; //线颜色 obj.strokeStyle = red; //开始绘制路径 obj.beginPath(); //光标移动到0,0 obj.moveTo(0, 0); //绘制到300,300 obj.lineTo(300, 300); //绘制定义好的路径 obj.stroke(); /script 绘制线 后盾网 人人做后盾 canvas id=canvas width=300 height=300/canvas script type=text/javascript c = document.getElementById(canvas); //获得绘图对象 obj = c.getContext(2d); //线宽 obj.lineWidth=2; //颜色 obj.strokeStyle=green; //绘制开始 obj.beginPath();