Canvas 画布小案例
<script> window.onload = function () { draw('canvas1'); draw('canvas2'); draw('canvas3'); draw('canvas4'); draw('canvas5'); draw('canvas6'); draw('canvas7'); draw('canvas8'); draw('canvas9'); }; function draw(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext('2d'); context.fillStyle = "#eeeeef"; context.fillRect(0, 0, 400, 400); //形状渐变 if (id == "canvas1") { for (var i = 0; i <= 6; i++) { context.beginPath(); context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
//一定要关闭路径 context.closePath(); context.fillStyle = "rgba(255,0,0,0.25)"; context.fill(); } } //莲花形 else if (id == "canvas2") { var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = "rgb(100,255,100)"; context.strokeStyle = "rgb(0,0,100)"; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); } //贝塞尔曲线，从中心圆引出的线都是曲线 else if (id == "canvas3") { var dx = 150; var dy = 150; var s = 100; context.beginPath(); context.fillStyle = "rgb(100,255,100)"; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); } //颜色渐变 else if (id == "canvas4") { var g1 = context.createLinearGradient(0, 0, 0, 300); g1.addColorStop(0, "rgb(255,255,0)"); g1.addColorStop(1, "rgb(0,255,255)"); context.fillStyle = g1; context.fillRect(0, 0, 500, 500); var g2 = context.createLinearGradient(0, 0, 300, 0); g2.addColorStop(0, "rgba(0,0,255,0.5)"); g2.addColorStop(1, "rgba(255,0,0,0.5)"); for (var i = 0; i < 10; i++) { context.beginPath(); context.fillStyle = g2; context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.closePath(); context.fill(); } } //径向渐变 else if (id == "canvas5") { var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400); g1.addColorStop(0.1, "rgb(255,255,0)"); g1.addColorStop(0.3, "rgb(255,0,255)"); g1.addColorStop(1, "rgb(0,255,255)"); context.fillStyle = g1; context.fillRect(0, 0, 500, 500); } //变形 else if (id == "canvas6") { var canvas = document.getElementById(id); if (canvas == null) { return false; } var context = canvas.getContext("2d"); context.fillStyle = "#eeeeef"; context.fillRect(0, 0, 500, 500); context.translate(200, 50); context.fillStyle = "rgba(255,0,0,0.25)"; for (var i = 0; i < 50; i++) { context.translate(25, 25); context.scale(0.95, 0.95);
//旋转 context.rotate(Math.PI / 10); context.fillRect(0, 0, 100, 50); } } //组合图形 else if (id == "canvas7") { var oprtns = new Array( "source-atop",//只绘制原有图层中被新图层所覆盖的部分与新图层的其他部分，原有图层中的其他部分变成透明 "source-in",//只显示重叠的部分，其他部分透明 "source-out",//只显示不重叠的部分，其他部分透明 "source-over",//表示新图层在原有图层之上 "destination-atop", "destination-in", "destination-out", "destination-over", "lighter",//原图层和新图层均绘制，重叠部分做加色处理 "copy",//只绘制新图层，原图层中未与新图层重叠的部分变成透明 "xor"//只绘制不重叠部分 ); i = 8; context.fillStyle = "blue"; context.fillRect(10, 10, 60, 60); context.globalCompositeOperation = oprtns[i]; context.beginPath(); context.fillStyle = "red"; context.arc(60, 60, 30, Math.PI * 2, false); context.fill(); } //阴影图形 else if (id == "canvas8") { context.fillStyle = "#eeeeef"; context.fillRect(0, 0, 500, 500); context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = "rgba(100,100,100,0.5)"; context.shadowBlur = 3.5; for (var i = 0; i < 3; i++) { context.translate(100, 100) Create5Star(context); context.fill(); } } //复制图片 else if (id == "canvas9") { context.fillStyle = "#ffffff"; context.fillRect(0, 0, 500, 500); var image = new Image(); image.src = "/images/1.jpg"; image.onload = function () { drawImage(context, image); } } } //绘制图片 function drawImage(context, image) { //从(0,0)开始绘制 //context.drawImage(image, 0, 0); //从(0,0)开始绘制，大小为200*200 context.drawImage(image, 0, 0, 200, 200); //drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) //drawImage(img对象,原图被复制区域的起始坐标和宽高,复制区域在画布上的起始坐标和宽高) context.drawImage(image, 200,200,380,380,230,230,250,250); } //创建五角星 function Create5Star(context) { var dx = 20; var dy = 0; var s = 50; context.beginPath(); context.fillStyle = "rgba(255,0,0,0.5)"; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; for (var i = 0; i < 5; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); } </script>
以上是用Canvas的getContext("2d")方法实现的简单图形。
下面实现当鼠标点击和移动时流星雨效果，利用createjs中的Easeljs：
<script src="easeljs-0.8.1.min.js"></script> <script> var canvas; var stage; var sprite; window.onload = function () { canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); stage.addEventListener("stagemousedown", clickCanvas); stage.addEventListener("stagemousemove", moveCanvas); var data = { images: ["1.jpg"], frames: { width: 20, height: 20, regX: 10, regY: 10 } }; sprite = new createjs.Sprite(new createjs.SpriteSheet(data)); createjs.Ticker.setFPS(20); createjs.Ticker.addEventListener("tick", tick); } function tick(e) { var t = stage.getNumChildren(); for (var i = t-1; i > 0; i--) { var s = stage.getChildAt(i); debugger; s.vY += 2; s.vX += 1; s.x += s.vX; s.y += s.vY; s.scaleX = s.scaleY = s.scaleX + s.vS; s.alpha += s.vA; if (s.alpha<=0||s.y>canvas.height) { stage.removeChildAt(i); } } stage.update(e); } //点击鼠标 function clickCanvas(e) { debugger; addS(Math.random() * 200 + 100, stage.mouseX, stage.mouseY, 2); } //移动鼠标 function moveCanvas(e) { debugger; addS(Math.random() * 2 + 1, stage.mouseX, stage.mouseY, 1); } function addS(count, x, y, speed) { debugger; for (var i = 0; i < count; i++) { var s = sprite.clone(); s.x = x; s.y = y; s.alpha = Math.random() * 0.5 + 0.5; s.scaleX = s.scaleY = Math.random() + 0.3; var a = Math.PI * 2 * Math.random(); var v = (Math.random() - 0.5) * 30 * speed; s.vX = Math.cos(a) * v; s.vY = Math.sin(a) * v; s.vS = (Math.random() - 0.5) * 0.2;//scale 缩放 s.vA = -Math.random()*0.05 - 0.01;//alpha 透明度 stage.addChild(s); } } </script>
Createjs：http://createjs.com/
Canvas的API：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
