搜索
Canvas后盾网2011-2015后盾网人人做后盾：•canvas标签定义图形，比如图表和其他图像。•canvas标签只是图形容器，您必须使用脚本来绘制图形。•canvas其实对于HTML来说很简单，只是一个标签元素而已，自己并没有行为，但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制到一块画布上，拥有绘制路径，矩形，圆，字符以及图像等功能。所有的标签只是图形的容器，必须使用JavaScript的API操作绘图。标签：•canvasid=“canvas”width=“500”height=“500”/canvasgetContext•返回一个用于在画布上绘图的环境scripttype=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)像素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方法或属性后盾网人人做后盾xyrsAngle圆的中心的x坐标。圆的中心的y坐标。圆的半径。起始角，以弧度计。（弧的圆形的三点钟位置是0度）。eAnglecounterclockwise结束角，以弧度计。可选。False=顺时针，true=逆时针。弧度计算公式：角度*Math.PI/180canvasid=canvaswidth=300height=300/canvasscripttype=text/javascriptc=document.getElementById(canvas);obj=c.getContext('2d');obj.lineWidth=10;//线颜色obj.strokeStyle=red;//开始绘制路径obj.beginPath();//光标移动到0,0obj.moveTo(0,0);//绘制到300,300obj.lineTo(300,300);//绘制定义好的路径obj.stroke();/script绘制线后盾网人人做后盾canvasid=canvaswidth=300height=300/canvasscripttype=text/javascriptc=document.getElementById(canvas);//获得绘图对象obj=c.getContext('2d');//线宽obj.lineWidth=2;//颜色obj.strokeStyle='green';//绘制开始obj.beginPath();//绘制矩形//参数：x,y,width,heightobj.strokeRect(50,50,100,100);//填充颜色obj.fillStyle=red;//实心矩形obj.fillRect(220,220,100,100);/script绘制矩形后盾网人人做后盾设置字体属性•context.font=40pxArial”设置对齐方式•context.textAlign=“left|right|center”在画布上绘制“被填充的”文本•context.fillText(text,x,y,maxWidth);在画布上绘制文本（无填充）•context.strokeText(text,x,y,maxWidth)设置文字基线•context.textBaseline=“top|middle|bottom”;获取文本宽度•context.measureText(text);文本控制后盾网人人做后盾向画布上绘制图像、画布或视频语法1:在画布上定位图像：context.drawImage(img,画布x坐标,画面y坐标);语法2:在画布上定位图像，并规定图像的宽度和高度context.drawImage(img,画布x坐标,画面y坐标,图片width,图片height);语法3:剪切图像，并在画布上定位被剪切的部分context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);参数：img规定要使用的图像、画布或视频。sx可选。开始剪切的x坐标位置。sy可选。开始剪切的y坐标位置。swidth可选。被剪切图像的宽度。sheight可选。被剪切图像的高度。x可选。在画布上放置图像的x坐标位置。y可选。在画布上放置图像的y坐标位置。width可选。要使用的图像的宽度。（伸展或缩小图像）height可选。要使用的图像的高度。（伸展或缩小图像）注意:参数数量不同，x、y的函数不同图像控制后盾网人人做后盾在水平和垂直方向重复图像•context.createPattern(image,repeat|repeat-x|repeat-y|no-repeat)获取画布矩形区域像素信息•context.getImageData(x,y,width,height)返回的Image对象的data属性返回一个对象，该对象包含指定的ImageData对象的图像数据对于ImageData对象中的每个像素，都存在着四方面的信息，即RGBA值：R-红色(0-255)G-绿色(0-255)B-蓝色(0-255)A-alpha通道(0-255;0是透明的，255是完全可见的)把图像数据（从指定的ImageData对象）放回画布•context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);参数说明：图像控制后盾网人人做后盾imgDataxy规定要放回画布的ImageData对象。在画布上放置图像的位置。在画布上放置图像的位置。•width•height•data•toDataURL()图像控制后盾网人人做后盾返回ImageData对象的宽度返回ImageData对象的高度返回一个对象，包含ImageData对象的图像数据获得图片base64加密的数据