Chrome图标上开始显示用户头像_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Chrome图标上开始显示用户头像
上传于||文档简介
&&C​h​r​o​m​e​图​标​上​开​始​显​示​用​户​头​像
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢一、对 canvas 的理解
&canvas&标签是 HTML5 中的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件。
canvas 是用来在网页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使用 js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像等。
浏览器支持
注释：Internet Explorer 8 以及更早的版本不支持 &canvas& 标签。Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 &canvas& 标签。
二、基本方法
绘图环境：
语法&Canvas.getContext(contextID)
参数&contextID&指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
【注】：getContext() 方法返回一个用于在画布上绘图的环境。
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
绘制图形样式style（一般在绘制图形前先进行样式设定）：
context.fillStyle & & & &//填充样式
context.strokeStyle & & & &//笔触颜色
context.lineWidth & & & &//边框宽度
绘制图像有两种方法：
context.fill() & & & &//填充
context.stroke() & & & &//绘制边框
颜色的表示方式:
& & & & &颜色名称:"red" "green" "blue"
&&&&&&&& 十六进制颜色值: "#FFFFFF"
& & & & &三色值：rgb(1-255,1-255,1-255)
& & & & &四色值：rgba(1-255,1-255,1-255,透明度)
三、使用 &canvas&
Step1: 首先在html页面中添加&canvas&标签，规定好画布的id和尺寸，代码如下：
&!--规定了canvas元素的id名称为canvas、宽度为400px、高度为300px--& &canvas id="myCanvas" width="400" height="300"/&
Step2: 通过JavaScript来进行绘制：
方法一：
&!--用谷歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js文件里进行绘制图像--&
&script src="canvas.js"&&/script&
方法二：
&!--或者直接在body里编写代码--&
&script type="text/javascript"&
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(50,50,150,100);
图解：
Step3:&Step2 分步骤：
通过id来捕获canvas元素
创建 context 对象
指定 fillStyle 填充颜色为红色指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, 高度);
1--绘制 线条：
context.moveTo(x,y)&
context.lineTo(x,y)
起点 moveTo 的点 到 终点 lineTo 的点之间画一条直线
如果没有moveTo那么第一次lineTo的效果和moveTo一样
每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点
1 // 绘制对角线
2 function demo1(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.strokeStyle = "#ff0000";
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();
实例结果：
1 // 绘制直角三角形
function demo1(id){
var canvas = document.getElementById(id);
4 var context = canvas.getContext("2d");
context.strokeStyle = "#ff0000";
context.lineTo(20, 20);
context.lineTo(20, 70);
context.lineTo(70, 70);
context.lineTo(20, 20);
context.stroke();
三角形有三个点，但在连线的时候还需要连回顶点；
最后一定记得加上 stroke(); &初学时容易犯这个毛病，这相当于你把点定好了，却没用线连起来，岂不......
实例结果：
CSS属性中有一圆角设置 radius，canvas画线段也要达到这种圆角匾额效果，我么也有相应的办法：
lineJoin&属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖角，默认)，bevel（斜角）,round（圆角）
lineCap&属性，定义线条的端点。lineCap有3个属性值：butt（平，默认）,round（圆）,square（方）
区别只是平头没有伸出去那么一截。圆头和方头都会伸出去一截，这一节是多长呢？就是线条宽度的一半。借用一张图说明：
1 // 圆角 连线
2 function demo1(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,8);
context.lineTo(180,8);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "#00ff00";
context.lineJoin = "round";
context.stroke();
context.beginPath();
context.moveTo(100,20);
context.lineTo(100,80);
context.lineTo(180,80);
context.lineTo(180,20);
context.lineTo(100,20);
context.closePath();//闭合路径
context.lineWidth = 10;
context.strokeStyle = 'rgba(0,255,0,0.5)';
context.lineJoin = "round";
context.stroke();
实例结果：
&2--绘制 矩形：
context.fillRect(x,y,width,height)&
strokeRect(x,y,width,height)
x:矩形起点横坐标
y:矩形起点纵坐标
width:矩形的宽度
height:矩形的高度
function demo2(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
// 1排1----默认填充为黑色 fillStyle = "#000"
context.fillRect(20, 20, 60, 60);
// 1排2----默认边框为黑色 strokeStyle = "#000"
context.strokeRect(100, 20, 60, 60);
// 2排----自定义填充色和边框颜色
context.fillStyle = "#0000ff";
context.strokeStyle = "#ff0000";
context.fillRect(20, 100, 60, 60);
//蓝色填充矩形
context.strokeRect(100, 100, 60, 60);
//红色边框矩形
context.lineWidth = 10;
//设置边框线框
context.strokeRect(180, 100, 60, 60);
//加粗边框矩形
// 3排----清除20*20的矩形区域
context.fillStyle = "#00ff00";
context.fillRect(20, 180, 60, 60);
context.clearRect(30, 190, 20, 20);
// 4排----给矩形添加透明度
context.fillStyle = "rgba(0,255,0,0.2)";
context.strokeStyle = "rgba(0,255,0,0.2)";
context.fillRect(20, 260, 60, 60);
//变浅的红色填充矩形
context.lineWidth = 10;
//设置边框线框，0.2的透明度不易观察
context.strokeRect(100, 260, 60, 60);
//变浅的红色边框矩形
起点?指的是矩形左上角的顶点
rgba(0, 255, 0, 0.2) &前三个参数为红绿蓝三色，最后一个参数是透明度参数，参数值范围0~1，接近于0越透明
实例结果：
&3--绘制 圆：
创建圆形方法定义：xxx.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x :圆的中心的 x 坐标
y :圆的中心的 y 坐标
r :圆的半径
sAngle :起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
eAngle :结束角，以弧度计
counterclockwise :可选。规定应该逆时针还是顺时针绘图。False 为 顺时针，true 为 逆时针
function demo3(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.strokeStyle = "00FF00";
context.beginPath();
context.arc(50, 50, 30, 0, 2*Math.PI, true);
context.stroke();
【注】：2*Math.PI 就是2&
实例结果：
function demo3(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#0000ff";
context.strokeStyle = "#ff0000";
context.beginPath();
context.arc(50, 50, 30, 0, 2*Math.PI, true);
context.closePath();
context.stroke();
context.fill();
实例结果：
function demo3(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#0000ff";
context.strokeStyle = "#ff0000";
context.beginPath();
context.arc(50, 50, 40, 0, 2*Math.PI, true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "pink";
context.beginPath();
context.arc(50, 50, 20, 0, 2*Math.PI, true);
context.closePath();
context.fill();
实例结果：
&4--绘制 路径：
context.beginPath()& &
context.closePath()
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
圆的角度 2*Math.PI，1/4角度就是Math.PI/4
function demo4(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.beginPath();
context.arc(20, 20, 50, 0, Math.PI/2 , false);
context.closePath();
context.fillStyle = '#0000ff';
context.fill();
context.beginPath();
context.arc(100, 20, 50, 0, Math.PI/2 , false);
context.strokeStyle = '#0000ff'
context.closePath();
context.stroke();
// 填充+边框
context.beginPath();
context.arc(180, 20, 50, 0, Math.PI/2 , false);
context.strokeStyle = '#0000ff';
context.closePath();
context.stroke();
context.fillStyle = 'rgba(0,0,255,0.2)';
context.fill();
&有边框线实例结果：
// 没有 beginPath(); closePath();
context.arc(100, 100, 50, 0, Math.PI/2 , false);
context.arc(200, 200, 50, 0, Math.PI/2 , false);
context.fillStyle = 'rgba(0,0,255,0.2)';
context.fill();
&无边框线实例结果：
&&& 1、系统默认在绘制第一个路径的开始点为beginPath
& & 2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
&&& 3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
&&& ps：书本的结论是&& 如果没有closePath那么前面的路劲会保留，实验证明正确的结论是 如果没有重新beginPath那么前面的路劲会保留
&&& ps1：如果你真心凌乱了，那么记住每次画路径都在前后加context.beginPath()&& 和context.closePath()就行
&5--绘制 曲线：
绘制贝塞尔曲线 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)&
cp1x:第一个控制点x坐标
cp1y:第一个控制点y坐标
cp2x:第二个控制点x坐标
cp2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标
绘制二次样条曲线&context.quadraticCurveTo(qcpx,qcpy,qx,qy)
qcpx:二次样条曲线控制点x坐标
qcpy:二次样条曲线控制点y坐标
qx:二次样条曲线终点x坐标
qy:二次样条曲线终点y坐标
1 var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
// 贝塞尔曲线
context.moveTo(50, 50);
context.lineWidth = 10;
context.strokeStyle = "aquamarine";
context.bezierCurveTo(50, 50, 500 , 50, 150, 150);
context.stroke();
实例结果：
1 function demo5(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
// 曲线组合
context.moveTo(50, 50);
context.bezierCurveTo(50, 50,150, 50, 150, 150);
context.stroke();
context.quadraticCurveTo(150, 250, 250, 250);
context.stroke();
实例结果：
6--绘制 渐变 效果：
1. &线性渐变 &var grd =&context.createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色 &context.addColorStop(offset,color)
xstart: 渐变开始点x坐标
&&& ystart: 渐变开始点y坐标
&&& xEnd: 渐变结束点x坐标
&&& yEnd: 渐变结束点y坐标&
&&& offset: 设定的颜色离渐变结束点的偏移量(0~1)
&&& color: 渐变颜色
对角线性渐变
对角线性渐变
function demo6(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
var grd = context.createLinearGradient(0,0,300,200);
grd.addColorStop(0,"#ff0000");
grd.addColorStop(1,"#0000ff");
context.fillStyle =
context.fillRect(0,0,300,200);
// 横向线型多色渐变
1 //横向线型多色渐变
var grd = context.createLinearGradient(0,0,300,0);
grd.addColorStop(0,"#ff0000");
grd.addColorStop(0.2,"#ff00ff");
grd.addColorStop(0.4,"#ffff00");
grd.addColorStop(0.6,"#00ffff");
grd.addColorStop(0.8,'pink');
grd.addColorStop(1,"#0000ff");
context.fillStyle =
context.fillRect(0,0,300,200);
结果显示：
2. &径向（发散）渐变 &var grd =&context.createLinearGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
& & xStart: 发散开始圆心x坐标
&&& yStart: 发散开始圆心y坐标
&&& radiusStart: 发散开始圆的半径
&&& xEnd: 发散结束圆心的x坐标
&&& yEnd: 发散结束圆心的y坐标
&&& radiusEnd: 发散结束圆的半径
// 径向渐变
//径向渐变
var grd = context.createRadialGradient(150, 100, 0, 150, 100, 100);
grd.addColorStop(0, 'rgb(100,200,100)');
grd.addColorStop(1, 'rgb(50,100,10)');
context.fillStyle =
context.beginPath();
context.arc(150, 100, 100, 0, Math.PI * 2, true);
context.closePath();
context.fill();
// 红太阳
1 //径向渐变
var grd = context.createRadialGradient(180, 70, 00, 180, 70, 150);
grd.addColorStop(0, 'rgb(255,80,0)');
grd.addColorStop(1, 'rgb(255,200,10)');
context.fillStyle =
context.beginPath();
context.arc(150, 100, 100, 0, Math.PI * 2, true);
context.closePath();
context.fill();
// 矩形渐变
1 var grd = context.createRadialGradient(150, 150, 0, 300, 300, 150);
grd.addColorStop(0.1, 'rgb(255,80,0)');
grd.addColorStop(0.8, 'rgb(255,200,10)');
grd.addColorStop(1, 'rgb(255,255,0)');
context.fillStyle =
context.fillRect(150, 150, 300, 300);
// 三角形渐变
1 var grd = context.createRadialGradient(0, 150, 100, 300, 150, 50);
grd.addColorStop(0,"#ff0000");
grd.addColorStop(0.2,"#ff00ff");
grd.addColorStop(0.4,"#ffff00");
grd.addColorStop(0.6,"#00ffff");
grd.addColorStop(0.8,'pink');
grd.addColorStop(1,"#0000ff");
context.fillStyle =
context.fillRect(0,0, 300, 300);
结果显示：
& & && & && & &&
7--绘制阴影：
context.shadowOffsetX : 阴影的横向位移量（默认值为0）
context.shadowOffsetY : 阴影的纵向位移量（默认值为0）
context.shadowColor : 阴影的颜色
context.shadowBlur : 阴影的模糊范围（值越大越模糊）
function demo10(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.shadowColor = "#ccc";
context.fillStyle = "#ffcc00";
context.fillRect(10,10,60,60);
//阴影模糊
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.shadowColor = "#ccc";
context.shadowBlur = 6;
context.fillStyle = "#ffcc00";
context.fillRect(100,10,60,60);
结果显示：
8--绘制 文字：
设置字体样式：context.font
水平对齐方式：context.textAlign （&属性值有 start、end、right、center）
垂直对齐方式：context.textBaseline （属性值有&top、hanging、middle、alphabetic、ideographic、bottom）
计算字体长度(px)：var length = context.measureText(text) （只能计算长度，不能计算高度）
填充文字：context.fillText(text,x,y) &
绘制文字轮廓 context.strokeText(text,x,y)
text: 文字内容
x: 文字起点的x轴坐标
y: 文字起点的y轴坐标
function demo12(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#ffcc00";
context.fillRect(0,0,700,100);
context.fillStyle = "#ff0000";
context.strokeStyle = "green";
context.font = "20px sans-serif";
context.textAlign = "start";
context.textBaseline = "top";
//填充字符串
var txt = "1 HTML5 CANVAS";
context.fillText(txt, 0, 0);
var length = context.measureText( txt );
context.fillText("长为" + length.width + "px", 0, 30);
context.font = "italic 20px sans-serif";
context.textAlign = "start";
context.textBaseline = "top";
var txt = "2 HTML5 CANVAS";
context.fillText(txt, 180, 0);
var length = context.measureText( txt );
context.fillText("长为" + length.width + "px", 180, 30);
context.font = "bold 20px sans-serif";
context.textAlign = "start";
context.textBaseline = "top";
var txt = "3 HTML5 CANVAS";
context.fillText(txt, 360, 0);
length = context.measureText( txt );
context.fillText("长为" + length.width + "px", 360, 30);
context.font = "bold 20px sans-serif";
context.textAlign = "start";
context.textBaseline = "top";
var txt = "3 HTML5 CANVAS";
context.strokeText(txt, 540, 0);
length = context.measureText( txt );
context.strokeText("长为" + length.width + "px", 540, 30);
结果显示：
9--绘制 图像：
1.绘图：context.drawImage
& & context.drawImage(image,x,y)
&&&&&&& image:Image对象var img=new Image(); img.src="url(...)";
&&&&&&& x: 图像左上顶点的x坐标
&&&&&&& y:&图像左上顶点的y坐标
& & context.drawImage(image,x,y,w,h)
&&&&&&& image:Image对象var img=new Image(); img.src="url(...)";
&&&&&&& x:&图像左上顶点的x坐标
&&&&&&& y:&图像左上顶点的y坐标
&&&&&&& w: 绘制图像的宽度
&&&&&&& h: 绘制图像的高度
&&& context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制
&image:Image对象var img=new Image(); img.src="url(...)";
&&&&&&& sx：图像上的x坐标
&&&&&&& sy：图像上的y坐标
&&&&&&& sw：矩形区域的宽度
&&&&&&& sh：矩形区域的高度
&&&&&&& dx：画在canvas的x坐标
&&&&&&& dy：画在canvas的y坐标
&&&&&&& dw：画出来的宽度
&&&&&&& dh：画出来的高度
function demo11(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
//载入图像drawImage(image,x,y)
context.fillStyle = '#ffcc00';
context.fillRect(0,0,);
var image = new Image();
image.src = "img/img.jpg";
image.onload=function(){
//drawImage(image,x,y)
context.drawImage(image,0,0);
context.drawImage(image,220,20);
//drawImage(image,x,y,w,h)
context.drawImage(image,440,20,100,75);
//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
context.drawImage(image,30,30,150,120,660,20,100,80);
结果显示：
2.图像平铺：context.createPattern(image,type)
&type:&&&&&&& no-repeat: 不平铺 &repeat-x: 横方向平铺 &repeat-y: 纵方向平铺 & repeat: 全方向平铺
1 //图像平铺
function demo111(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
var image = new Image();
image.src = "img/text.jpg";
image.onload = function () {
var ptrn = context.createPattern(image, "repeat");
context.fillStyle =
context.fillRect(0, 0, 400, 100);
结果显示：
3.图像裁剪：context.clip()
context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候1&先创建裁剪区域，2&再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态）
结果显示：
4.像素处理：var imagedata=context.getImageData(sx,sy,sw,sh)
结果显示：
结果显示：
10--canvas 变形：
1. &平移 context.translate(x,y)
&&& x:坐标原点向x轴方向平移x
&&& y:坐标原点向y轴方向平移y
2. &缩放 context.scale(x,y)
&&& x:x坐标轴按x比例缩放
&&& y:y坐标轴按y比例缩放
3. &旋转 context.rotate(angle)
&&& angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）
function demo7(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#eecc33";
//平移1 缩放2 旋转3
context.translate(150, 10);
context.scale(0.5, 0.5);
context.rotate(Math.PI / 3);
context.fillRect(0, 0, 200, 200);
结果显示：
1 function draw5(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext("2d");
context.save(); //保存了当前context的状态
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "rgba(255,0,0,0.1)";
//平移 缩放 旋转
context.translate(100, 100);
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.2)";
//平移 旋转 缩放 1 3 2
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.3)";
//缩放 平移 旋转 2 1 3
context.scale(0.5, 0.5);
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.4)";
//缩放 旋转 平移
context.scale(0.5, 0.5);
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,0.5)";
//旋转 平移 缩放
context.rotate(Math.PI / 4);
context.translate(100, 100);
context.scale(0.5, 0.5);
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复到刚刚保存的状态
context.save(); //保存了当前context的状态
context.fillStyle = "rgba(255,0,0,1)";
//旋转 缩放 平移
context.rotate(Math.PI / 4);
context.scale(0.5, 0.5);
context.translate(100, 100);
context.fillRect(0, 0, 100, 100);
//实验表明应该移动的是坐标轴
//实验表明缩放的是坐标轴比例
//实验表明旋转的是坐标轴
//综合上述，因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果
11--矩阵变换： context.transform(m11,m12,m21,m22,dx,dy)
context.translate(x,y) 等同于 context.transform (1,0,0,1,x,y)或context.transform(0,1,1,0.x,y)
context.scale(x,y) 等同于 context.transform(x,0,0,y,0,0)或context.transform (0,y,x,0, 0,0);
context.rotate(&) 等同于 &
context.transform(Math.cos(&*Math.PI/180)，Math.sin(&*Math.PI/180),
Math.sin(&*Math.PI/180),Math.cos(&*Math.PI/180),0,0）
&&& 或
context.transform(-Math.sin(&*Math.PI/180),Math.cos(&*Math.PI/180),
Math.cos(&*Math.PI/180)，Math.sin(&*Math.PI/180), 0,0)
12--图形组合： context.globalCompositeOperation=type
type 值：
source-over（默认值）: 在原有图形上绘制新图形
destination-over : 在原有图形下绘制新图形
source-in : 显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
destination-in : 显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
source-out : 只显示新图形非交集部分
destination-out : 只显示原有图形非交集部分
source-atop : 显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-atop : 显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter : 原有图形和新图形都显示，交集部分做颜色叠加
xor : 重叠飞部分不现实
copy : 只显示新图形
1 var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
//蓝色矩形
context.fillStyle = "blue";
context.fillRect(10, 10, 60, 60);
//设置组合方式 source-over（默认值）
context.globalCompositeOperation = source-
//红色圆形
context.beginPath();
context.fillStyle = "red";
context.arc(60, 60, 30, 0, 2*Math.PI , true);
context.closePath();
context.fill();
&结果显示：
动态切换各种组合实例：
function demo9(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
var oprtns = new Array(
"source-over",
"destination-over",
"source-in",
"destination-in",
"source-out",
"destination-out",
"source-atop",
"destination-atop",
"lighter",
var i = 0;//组合效果编号
//结合setinterval动态显示组合
var interal = setInterval(function () {
if (i == 10) {
//蓝色矩形
context.fillStyle = "blue";
context.fillRect(10, 10, 60, 60);
//设置组合方式
context.globalCompositeOperation = oprtns[i];
//设置新图形（红色圆形）
context.beginPath();
context.fillStyle = "red";
context.arc(60, 60, 30, 0, Math.PI * 2, false);
context.fill();
&结果显示：
&五、后续补充
canvas 还有很多属性方法,有兴趣的猴子们继续加油！！！ & && & & &转&载 带 我 飞飞飞！！！& & & &&
颜色、样式和阴影
设置或返回用于填充绘画的颜色、渐变或模式
设置或返回用于笔触的颜色、渐变或模式
设置或返回用于阴影的颜色
设置或返回用于阴影的模糊级别
设置或返回阴影距形状的水平距离
设置或返回阴影距形状的垂直距离
创建线性渐变（用在画布内容上）
在指定的方向上重复指定的元素
创建放射状/环形的渐变（用在画布内容上）
规定渐变对象中的颜色和停止位置
设置或返回线条的结束端点样式
设置或返回两条线相交时，所创建的拐角类型
设置或返回当前的线条宽度
设置或返回最大斜接长度
绘制&被填充&的矩形
绘制矩形（无填充）
在给定的矩形内清除指定的像素
填充当前绘图（路径）
绘制已定义的路径
起始一条路径，或重置当前路径
把路径移动到画布中的指定点，不创建线条
创建从当前点回到起始点的路径
添加一个新点，然后在画布中创建从该点到最后指定点的线条
从原始画布剪切任意形状和尺寸的区域
创建二次贝塞尔曲线
创建三次方贝塞尔曲线
创建弧/曲线（用于创建圆形或部分圆）
创建两切线之间的弧/曲线
如果指定的点位于当前路径中，则返回 true，否则返回 false
缩放当前绘图至更大或更小
旋转当前绘图
重新映射画布上的 (0,0) 位置
替换绘图的当前转换矩阵
将当前转换重置为单位矩阵。然后运行 transform()
设置或返回文本内容的当前字体属性
设置或返回文本内容的当前对齐方式
设置或返回在绘制文本时使用的当前文本基线
在画布上绘制&被填充的&文本
在画布上绘制文本（无填充）
返回包含指定文本宽度的对象
向画布上绘制图像、画布或视频
返回 ImageData 对象的宽度
返回 ImageData 对象的高度
返回一个对象，其包含指定的 ImageData 对象的图像数据
创建新的、空白的 ImageData 对象
返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
把图像数据（从指定的 ImageData 对象）放回画布上
设置或返回绘图的当前 alpha 或透明值
设置或返回新图像如何绘制到已有的图像上
保存当前环境的状态
返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()
&学习资源：.cn/html5/html_5_canvas.asp &&http://blog.csdn.net/clh604/article/details/8536059 &&http://www.jb51.net/html5/70307.html
阅读(...) 评论()
