<!DOCTYPE html><html><head><title>CanvasTest2</title><meta charset="utf-8"><link href="./css/canvas.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="./jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){var canvas = $("#myCanvas");var context = canvas.get(0).getContext("2d");/************************************保存和恢复绘图状态**************************************************************************************context.fillStyle = "rgb(255, 0, 0)";//绘制风格context.save();//保存画布状态context.fillRect(50, 50, 100, 100);context.fillStyle = "rgb(0, 0, 255)";context.save();context.fillRect(200, 50, 100, 100);context.restore();//恢复画布状态context.fillRect(350, 50, 100, 100);context.restore();context.fillRect(50, 200, 100, 100);***************************************变形–平移********************************************************************************************context.fillRect(50, 50, 100, 100);context.translate(150, 150);//将原点从一个位置移到另一个位置context.fillStyle="rgb(255, 0, 0)";context.fillRect(50, 50, 100, 100);***************************************变形–缩放********************************************************************************************context.save();//保存画布状态context.translate(150, 150);context.scale(2, 2);//进行缩放部分context.fillRect(0, 0, 100, 100);context.restore();//恢复画布状态context.fillRect(0, 0, 100, 100);//不进行缩放部分***************************************变形–旋转********************************************************************************************context.translate(200, 200);//将要旋转的正方形的圆心平移context.rotate(0.7854);//旋转45度角context.fillRect(-50, -50, 100, 100);//绘制正方形***************************************变形–变换矩阵****************************************************************************************context.setTransform(1, 0, 0, 1, 0, 0);//单位矩阵var xScale = Math.cos(0.7854);//x轴缩放var ySkew = -Math.sin(0.7854);//y轴倾斜var xSkew = Math.sin(0.7854);//x轴倾斜var yScale = Math.cos(0.7854);//y轴缩放var xTrans = 200;//x轴平移var yTrans = 200;//y轴平移context.transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans);context.fillRect(-50, -50, 100, 100);***************************************合成–全局阿尔法值************************************************************************************context.fillStyle = "rgb(63, 169, 245)";context.fillRect(50, 50, 100, 100);context.globalAlpha = 0.5;//0.5是与globalAlpha匹配的全局阿尔法值，再次使用fillStyle时（带有一个0.5的全局阿尔法值）会使全局阿尔法值context.fillStyle = "rgb(255, 123, 172)";//，0.5*0.5=0.25context.fillRect(100, 100, 100, 100);context.globalAlpha = 0.25;context.fillStyle = "rgb(255, 123, 172)";context.fillRect(150, 150, 100, 100);***************************************合成–合成操作*****************************************************************************************context.fillStyle = "rgb(63, 169, 245)";context.fillRect(50, 50, 100, 100);context.globalCompositeOperation = "source-over";//默认值，表示绘制的图形（源）将画在现有的画布（目标）之上context.fillStyle = "rgb(255, 123, 172)";context.fillRect(100 ,100, 100, 100);/*globalCompositeOperation支持11种属性：1.source-over默认值，表示绘制的图形（源）将画在现有的画布（目标）之上2.destination-over 与source-over相反，将目标绘制在源之上3.source-atop ..不一一解释了，上网搜索，看合成效果会有更直观的印象4.destination-atop 5.source-in 6.destination-in 7.source-out 8.destination-out9.lighter 10.copy 11.xor*//***************************************合成–阴影********************************************************************************************//阴影效果可通过4个属性值来进行操作，，shadowBlur（像素模糊值，默认0），shadowOffsetX（默认0），shadowOffsetY（默认0），shadowColor（默认设置为透明黑）/*例1context.shadowBlur = 20;context.shadowColor = "rgb(0, 0, 0)";context.fillRect(50, 50, 100, 100);*//*例2context.shadowBlur = 0;context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowColor = "rgba(100, 100, 100, 0.5)";//透明灰context.fillRect(200, 50, 100, 100);*//*例3context.shadowColor = "rgb(255, 255, 0)";//金黄context.shadowBlur = 20;context.shadowOffsetX = 0;context.shadowOffsetY = 0;context.beginPath();context.arc(400, 100, 50, 0, Math.PI*2, false);context.fill();*//***************************************合成–渐变********************************************************************************************//线性渐变createLinearGradient,放射性渐变createRadialGradient/*例1var gradient = context.createLinearGradient(0, 0, 0, canvas.height());gradient.addColorStop(0, "rgb(0, 0, 0)");gradient.addColorStop(1, "rgb(255, 255, 255)");context.fillStyle = gradient;context.fillRect(0, 0, canvas.width(), canvas.height());*//*例2createRadialGradient(x0, y0, r0, x1, y1, r1)两个圆之间存在渐变的关系var gradient = context.createRadialGradient(300, 300, 10, 100, 100, 50);gradient.addColorStop(0, "rgb(0, 0, 0)");gradient.addColorStop(1, "rgb(150, 150, 150)");context.fillStyle = gradient;context.fillRect(0, 0, canvas.width(), canvas.height());*//*例3var canvasCentreX = canvas.width()/2;var canvasCentreY = canvas.width()/2;var gradient = context.createRadialGradient(canvasCentreX, canvasCentreY, 0, canvasCentreX, canvasCentreY, 250);gradient.addColorStop(0, "rgb(0, 0, 0)");gradient.addColorStop(1, "rgb(150, 150, 150)");context.fillStyle = gradient;context.fillRect(0, 0, canvas.width(), canvas.height());*//***************************************合成–复杂路径*****************************************************************************************/*例1//创建一个三角形context.beginPath();context.moveTo(100, 50);//将原点移动到指定点,创建一个全新的子路径context.lineTo(150, 150);context.lineTo(50, 150);context.closePath();context.stroke();context.fill();*//*例2//二次贝塞尔曲线context.lineWidth = 5;context.beginPath();context.moveTo(50, 250);context.quadraticCurveTo(250, 100, 450, 250);context.stroke();*//*例3//三次贝塞尔曲线context.lineWidth = 5;context.beginPath();context.moveTo(50, 250);context.bezierCurveTo(150, 50, 350, 450, 450, 250);//参数含义自行百度吧context.stroke();*//***************************************将画布导出为图像*****************************************************************************************/context.save();context.fillRect(50, 50, 100, 100);context.fillStyle = "rgb(255, 0, 0)";context.fillRect(100, 100, 100, 100);context.restore();context.fillRect(150, 150, 100, 100);var dataURL = canvas.get(0).toDataURL();var url = $("#url");url.html(dataURL);var img = $("<img></img>");img.attr("src", dataURL);canvas.replaceWith(img);});</script></head><body><canvas id="myCanvas" width="1000" height="1000"></canvas><p id="url"></p></body></html>
你必须百分之百的把自己推销给自己。
