一、图像重叠
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!--<canvas id="myCanvas"></canvas>--> <script> let gco = new Array(); //目标图像顶部显示源图像 gco.push("source-atop"); //目标图像内部显示源图像 gco.push("source-in"); //目标图像之外显示源图像 gco.push("source-out"); //目标图像上显示源图像 gco.push("source-over"); //源图像顶部显示目标图像 gco.push("destination-atop"); //源图像内部显示目标图像 gco.push("destination-in"); //源图像外部显示目标图像 gco.push("destination-out"); //源图像上显示目标图像 gco.push("destination-over"); //显示源图像+目标图像 gco.push("lighter"); //显示源图像，忽略目标图像 gco.push("copy"); //使用异或，操作源图像与目标图像组合 gco.push("xor"); for (var n = 0; n < gco.length; n++) { document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>"); var c = document.createElement("canvas"); c.width = 120; c.height = 100; document.getElementById("p_" + n).appendChild(c); var ctx = c.getContext("2d"); ctx.fillStyle = "blue"; //绘制蓝色矩形，目标图像 ctx.fillRect(10, 10, 50, 50); //如何将源图像绘制到目标图像，源图像=打算绘制的图像，目标图像=已经存在图像 ctx.globalCompositeOperation = gco[n]; ctx.beginPath(); ctx.fillStyle = "red"; //绘制红色圆，源图像 ctx.arc(50, 50, 30, 0, 2 * Math.PI); ctx.fill(); document.write("</div>") } </script> </body> </html>
二、图像阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas"></canvas> </body> <script> <!-- 获取元素--> var c=document.getElementById("myCanvas"); //获取canvs上下文 var ctx=c.getContext("2d"); //设置阴影模糊级数 ctx.shadowBlur=10; //设置X轴偏移量 ctx.shadowOffsetX=20; //设置Y轴偏移量 ctx.shadowOffsetY=16; //设置阴影颜色 ctx.shadowColor="black"; ctx.fillStyle="red"; ctx.fillRect(20,20,100,80); </script> </html>
三、绘制五角星
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> function draw(id) { var c = document.getElementById(id); //获取canvs上下文 var ctx = c.getContext("2d"); //设置填充颜色 ctx.fillStyle = "#eeeeef"; //绘制矩形 ctx.fillRect(0, 0, 500, 500); //设置阴影偏移量 ctx.shadowOffsetX = 20; ctx.shadowOffsetY = 10; //设置阴影颜色 ctx.shadowColor = 'rgba(100,100,100,0.5)'; //设置阴影模糊度 ctx.shadowBlur = 3.5; //设置绘制偏移量 ctx.translate(0, 50); for (var i = 0; i < 3; i++) { ctx.translate(100, 100); createStart(ctx); ctx.fill(); } //绘制五角星 function createStart(ctx) { var dx=100; var dy=0; var s=50; ctx.beginPath(); ctx.fillStyle='rgba(255,0,0,0.5)'; //将360度分为5等份 var dig=4*Math.PI/5; for (var i = 0; i < 5; i++) { var x=Math.sin(i*dig); var y=Math.cos(i*dig); //绘制直线 ctx.lineTo(dx+x*s,dy+y*s); } //100 50 //40 129.38926261462365 -40.450849718747364 //40 52.44717418524232 15.450849718747362 //40 147.55282581475768 15.450849718747387 //40 70.61073738537635 -40.450849718747385 ctx.closePath(); } } </script> </html>
