HTML5高级工程师之canvas.pptx

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