HTML5的Canvas标签详解.docVIP

HTML5的Canvas标签详解 canvas是html5当中的一个标签，通过Javascript来画图。 canvas id=”canvas” width=”150″ height=”150″/canvas script var canvas = document.getElementById(”canvas”); var ctx = canvas.getContext(”2d”); ctx.fillStyle = “rgb(0,0,200)”; ctx.fillRect(10, 10, 50, 50); /script 画图形 这是canvas的网格，刚才的图形，x=10,y=10, width=150, height=150 不像svg, canvas仅支持一种图形-矩形，所有其它复杂的图形都是通过一些函数来组成的。 画矩形 fillRect(x,y,width,height) : 画一个填充的矩形 strokeRect(x,y,width,height) : 为一个矩形描边 clearRect(x,y,width,height) : 清楚一个矩形的一部分并且设为透明 rect(x, y, width, height) 直接画矩形，当调用rect方法时moveTo会直接定位到(0,0)位置 画路径 beginPath() 创建路径的第一步是调用beginPath方法，返回一个存储路径的信息 closePath() 从当前的点到起始点闭合路径 stroke()描边路径 fill()填充路径 lineTo(x, y) 从上一个起点到(x,y)的点画线，上一个起点可以通过moveTo来指定，默认为原先路径的终点 ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill(); 画弧线 arc(x, y, radius, startAngle, endAngle, anticlockwise) (x,y)是圆弧的圆心，radius-半径, startAngle和endAngle是圆弧的开始和结束弧度（radians = (Math.PI/180)*degree)，anticlockwise为true的话是逆时针，否则为顺时针 二次方曲线以及贝塞尔曲线 quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) (cp1x, cp1y),(cp2x,cp2y)是曲线的控制点（红点），(x,y)是曲线的终点 使用图像 drawImage(image, x, y) image-图像对象 function draw() { var ctx = document.getElementById(’canvas’).getContext(’2d’); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = ‘images/backdrop.png’; } drawImage(image, x, y, width, height)width和height是目标canvas上图像的宽高 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) image参数与前面一样，后面的四个参数是截取的参数，再后面的四个参数是目标canvas图像的位置以及宽高 应用样式和颜色 fillStyle = color 设置填充色 strokeStyle = color 设置描边色 color可以是css颜色值，一个渐变对象或一个模式对象 线条样式 lineWidth = value 线条宽度 lineCap = type 线条的端点类型可以是butt(默认),round和square lineJoin = type 连接线的类型：round,bevel和miter(默认) miterLimit = value 当设置miter时的选项 渐变 通过下面两个方法创建一个canvasGradient对象, 就可以把这个对象应用于fillStyle和strokeStyle属性了 createLinearGradient(x1,y1,x2,y2) （x1,y1)到(