HTML5+CSS开发 canvas知识语法 CH7-3 canvas.pptVIP

第*页 canvas的图像剪裁功能是指，在画布内使用路径，只绘制该路径所包括区域内的图像，不绘制路径外部的图像。 使用图像上下文对象的不带参数的clip方法来实现canvas元素的图像剪裁功能。该方法使用路径来对canvas画布设置一个剪裁区域。因此，必须先创建好路径。路径创建完成后，调用clip方法设置剪裁区域。 第*页 像素处理需要用到getImageData和putImageData两个方法，先用getImageData复制canvas画布中的像素数据，然后对获取的像素数据进行处理，最后再通过putImageData将处理完的数据粘贴到canvas画布。 第*页 HTML5有11种组合图形的方式，只要将其设置到context.globalCompositeOperation即可。使用方法为： context.globalCompositeOperation = type 第*页 图像混合需要使用到canvas的globalCompositeOperation属性，使用方法为： context.globalCompositeOperation=属性值 第*页 fillText方法用填充的方式绘制字符串，该方法的使用格式如下： void fillText(text,x,y,[maxWidth]); 第*页 在使用canvas进行文字的绘制之前，可以先对该对象的有关文字绘制的属性进行设置，这些属性如下： font：指定正在绘制的文字的样式。如果要在绘制文字时改变字体样式，只需要更改该属性的值即可。默认的字体样式为10px sans-serif。例如： context.font = 20pt Times New Roman; textAlign：指定正在绘制的文字的对齐方式，有left（左对齐）、right（右对齐）、center（居中对齐）、start（如果文字从左往右排版则左对齐，如果从右往左排版则右对齐）和end（和start正好相反）5种对齐方式，默认是start。 第*页 strokeText方法可以用轮廓方式绘制字符串，该方法格式如下： void strokeText(text,x,y,[maxWidth]); 第*页 可以使用图形上下文对象的measureText方法得到文字的宽度，该方法的使用格式如下： metrics = context.measureText(text); 第*页 【例】绘制填充文字、轮廓文字，获取文字宽度并显示。 HTML5应用开发 canvas 第*页 添加canvas元素 检测浏览器支持 使用Canvas绘制图形 Canvas坐标系 第*页 在HTML页面中添加canvas元素的方法和其他元素的添加一样，代码如下： canvas id=canvas1 width=400 height=300/canvas 第*页 并不是所有的浏览器都支持canvas元素，因此，在使用时需要先进行检测。检测的方法有两种：一种是为不支持canvas元素的浏览器提供替代显示的内容；另一种是使用JavaScript代码进行检测。 第*页 canvas元素本身并不能实现图形绘制功能，绘制图形的工作需要由JavaScript来完成。使用JavaScript可以在canvas元素内部添加线条、图片和文字，也可以在其中绘画，还能够加入高级动画。 第*页 在canvas元素中绘制图形时，需要为图形指定摆放位置。fillRect(50,50,100,100)的前两个参数就是指定所绘制矩形的x轴和y轴坐标值。在canvas中，坐标原点（0,0）位于canvas元素的左上角，x轴水平向右延伸，y轴向下延伸。 第*页 在canvas上绘制简单直线，主要用到3个方法：moveTo、lineTo和stroke。如果要设置直线端点的样子，可以使用lineCap属性指定。 第*页 绘制矩形时，需要用到fillStyle属性、fillRect方法，还可以使用strokeStyle和strokeRect方法。其中，fillStyle属性用于指定填充颜色；fillRect方法用于以指定的填充颜色绘制一个矩形；strokeStyle指定边框线颜色；strokeRect以指定的颜色绘制矩形轮廓。 第*页 HTML5提供了专门用于绘制圆形或弧线的arc方法和arcTo方法。arc方法的使用格式如下： arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画布上绘制以坐标点(x,y)为圆心、半径为radius的圆上的一段弧线。这段弧线的起始弧度是startRad，结束弧度是endRad。这里的弧度是以x轴正方向(时钟三点钟)为基准、进行顺时针旋转的角度来计算的。anticlockwise