<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas> </body> <script> window.onload=function(){ var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色） context=canvas.getContext("2d"); canvas.width=800; canvas.height=800; context.translate(100,100);//将原点坐标移动到100，100的位置 drawRect(context,0,0,400,400,10,"#058","red"); drawRect2(context,100,100,400,400,10,"green","rgba(0,256,0,.5)"); }; function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){ cxt.beginPath(); /*cxt.moveTo(x,y); cxt.lineTo(x+width,y); cxt.lineTo(x+width,y+height); cxt.lineTo(x,y+height);*/ cxt.rect(x,y,width,height);//rect方法是创建矩形 //cxt.fillRect(x,y,width,height);//绘制矩形,会通过当前的fillStyle绘制出一个填充的矩形 //cxt.strokeRect(x,y,width,height);//绘制矩形，会通过当前的strokeStyle绘制出带边框的矩形 cxt.closePath(); cxt.lineWidth=borderWidth; cxt.fillStyle=fillColor; cxt.strokeStyle=borderColor; cxt.fill(); cxt.stroke(); } function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){//绘制矩形 cxt.lineWidth=borderWidth; cxt.fillStyle=fillColor; cxt.strokeStyle=borderColor; cxt.fillRect(x,y,width,height); cxt.strokeRect(x,y,width,height); } </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto;"></canvas> </body> <script> var canvas=document.getElementById("canvas"), context=canvas.getContext("2d"); canvas.width=800; canvas.height=800; context.lineWidth=10; context.strokeStyle="#058"; context.beginPath(); context.moveTo(100,200); context.lineTo(700,200); context.lineCap="butt";//lineCap线段末尾的样式，butt为标准型（默认值） round为突出一段圆形 square为突出一段矩形 context.stroke(); context.beginPath(); context.moveTo(100,400); context.lineTo(700,400); context.lineCap="round";//lineCap只能用于线段的开始处和结尾处不能用于线段的连接处 context.stroke(); context.beginPath(); context.moveTo(100,600); context.lineTo(700,600); context.lineCap="square"; context.stroke(); </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto">当前浏览器不支持canvas</canvas> </body> <script> window.onload=function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//画布的宽度 canvas.height = 768; var context = canvas.getContext("2d"); /* context.lineWidth=10; context.lineJoin="miter";//lineJoin默认值是miter表示默认形成一个尖角，bevel斜接的形式，round圆角的形式 context.miterLimit=20;//只有当lineJoin的值为miter时才有效，也就是尖角的内角和外角的最大距离是10，当超过10时 会按照bevel显示*/ context.fillStyle="black"; context.fillRect(0,0,canvas.width,canvas.height); for(var i=0;i<200;i++){ var r=Math.random()*10+10; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; var a=Math.random()*360; drawStar(context,x,y,r,r/2,a); } }; //绘制五角星 function drawStar(cxt,x,y,outR,innerR,rot){//rot为顺时针旋转的角度 cxt.beginPath(); for(var i=0;i<5;i++){ cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outR+x, -Math.sin((18+i*72-rot)/180*Math.PI)*outR+y); cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x, -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y); } cxt.closePath(); cxt.fillStyle="#fb3"; cxt.strokeStyle="#fd5"; cxt.lineWidth=3; cxt.lineJoin="round"; cxt.fill(); cxt.stroke(); } </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto">当前浏览器不支持canvas</canvas> </body> <script> window.onload=function() { var canvas = document.getElementById("canvas"); canvas.width = 1024;//画布的宽度 canvas.height = 768; var context = canvas.getContext("2d"); /* context.lineWidth=10; context.lineJoin="miter";//lineJoin默认值是miter表示默认形成一个尖角，bevel斜接的形式，round圆角的形式 context.miterLimit=20;//只有当lineJoin的值为miter时才有效，也就是尖角的内角和外角的最大距离是10，当超过10时 会按照bevel显示*/ context.fillStyle="black"; context.fillRect(0,0,canvas.width,canvas.height); for(var i=0;i<200;i++){ var r=Math.random()*10+10; var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; var a=Math.random()*360; drawStar(context,x,y,r,a); } }; //绘制五角星 function drawStar(cxt,x,y,R,rot){//rot为顺时针旋转的角度 cxt.save(); cxt.translate(x,y); cxt.rotate(rot/180*Math.PI); cxt.scale(R,R); starPath(cxt); cxt.fillStyle="#fb3"; /* cxt.strokeStyle="#fd5"; cxt.lineWidth=3; cxt.lineJoin="round";*/ cxt.fill(); /* cxt.stroke();*/ cxt.restore(); /*cxt.fillStyle="#fb3"; cxt.strokeStyle="#fd5"; cxt.lineWidth=3; cxt.lineJoin="round"; cxt.fill(); cxt.stroke();*/ } function starPath(cxt) { cxt.beginPath(); for(var i=0;i<5;i++){ cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5, -Math.sin((54+i*72)/180*Math.PI)*0.5); } cxt.closePath(); } </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ cursor: not-allowed; } </style> </head> <body> <canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas> </body> <script> window.onload=function(){ var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色） context=canvas.getContext("2d"); canvas.width=800; canvas.height=800; context.save();//保存图形的状态 context.fillStyle="red"; context.translate(100,100);//将原点坐标移动到100，100的位置 context.fillRect(0,0,200,200); context.restore();//恢复图形的状态， context.fillStyle="green"; context.translate(100,100);//如果前边已经有translate属性，这时translate中的属性值应该累加，translate值其实为200，200，如果代码中存在restore方法，则说明已经恢复的图形的状态，此时translate值为替换，不是累加 context.fillRect(100,100,200,200); }; </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ cursor: not-allowed; } </style> </head> <body> <canvas id="canvas" style="display: block;margin:20px auto;border:1px solid #ccc;"></canvas> </body> <script> window.onload=function(){ var canvas=document.getElementById("canvas"),//canvas后绘制的的图形会遮挡住之前绘制的图形（前提是重叠 而且后者有填充色） context=canvas.getContext("2d"); canvas.width=800; canvas.height=800; context.save();//保存图形的状态 context.fillStyle="red"; context.translate(100,100);//将原点坐标移动到100，100的位置 context.fillRect(0,0,200,200); context.restore();//恢复图形的状态， context.fillStyle="green"; context.translate(100,100);//如果前边已经有translate属性，这时translate中的属性值应该累加，translate值其实为200，200，如果代码中存在restore方法，则说明已经恢复的图形的状态，此时translate值为替换，不是累加 context.fillRect(100,100,200,200); }; </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas> </body> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); canvas.width=800; canvas.height=800; // transform(a,b,c,d,e,f) a,d表示水平、垂直缩放。b，c表示水平、垂直倾斜。e，f表示水平、垂直位移 /* context.fillStyle="red"; context.strokeStyle="#058"; context.save(); //当页面中有多个transform时，transform值是累加的，不是覆盖的 context.transform(2,0.2,0.2,1.5,50,100);//表示在水平方向移动50像素 垂直方向移动100像素 水平方向缩放2倍 垂直方向缩放1.5倍 水平和垂直方向都倾斜0.2 context.transform(1,0,0,1,50,100); //setTransform为设置当前的transform值，不管前边设置的transform值为多少 setTransform表示设置当时的transform值为多少 context.setTransform(1,0,0,1,100,100); context.fillRect(50,50,300,300); context.strokeRect(50,50,300,300); context.restore();*/ var linearGrad=context.createLinearGradient(0,0,800,800);//线性渐变的起始坐标为0,0 终止坐标为800,800 当渐变位置小于画布的尺寸时，剩下的区域以最后的填充色。如果渐变位置超出画布的尺寸则不显示 /*linearGrad.addColorStop(0.0,"#fff");//添加渐变色 最小值是0（也就是起点是白色），最大值是1（终点是黑色） linearGrad.addColorStop(1.0,"#000");*/ linearGrad.addColorStop(0.0,"white"); linearGrad.addColorStop(0.25,"yellow"); linearGrad.addColorStop(0.5,"green"); linearGrad.addColorStop(0.75,"blue"); linearGrad.addColorStop(1.0,"black"); context.fillStyle=linearGrad; context.fillRect(0,0,800,800) </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas> </body> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); canvas.width=800; canvas.height=800; // transform(a,b,c,d,e,f) a,d表示水平、垂直缩放。b，c表示水平、垂直倾斜。e，f表示水平、垂直位移 /* context.fillStyle="red"; context.strokeStyle="#058"; context.save(); //当页面中有多个transform时，transform值是累加的，不是覆盖的 context.transform(2,0.2,0.2,1.5,50,100);//表示在水平方向移动50像素 垂直方向移动100像素 水平方向缩放2倍 垂直方向缩放1.5倍 水平和垂直方向都倾斜0.2 context.transform(1,0,0,1,50,100); //setTransform为设置当前的transform值，不管前边设置的transform值为多少 setTransform表示设置当时的transform值为多少 context.setTransform(1,0,0,1,100,100); context.fillRect(50,50,300,300); context.strokeRect(50,50,300,300); context.restore();*/ var radialGrad=context.createRadialGradient(400,400,0,400,400,500);//径向渐变 第一个圆的圆心位置是400,400，半径是0，第二个圆的圆心位置是400,400，半径是500 radialGrad.addColorStop(0.0,"white"); radialGrad.addColorStop(0.25,"yellow"); radialGrad.addColorStop(0.5,"green"); radialGrad.addColorStop(0.75,"blue"); radialGrad.addColorStop(1.0,"black"); context.fillStyle=radialGrad; context.fillRect(0,0,800,800) </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="display: block;margin:20px auto; border: 1px solid #ccc"></canvas> </body> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); canvas.width=800; canvas.height=800; /* var backgroundImage=new Image(); backgroundImage.src="zs_content_bg.jpg"; backgroundImage.onload=function(){ var pattern=context.createPattern(backgroundImage,"no-repeat");//创建背景图 createPattern中第一个参数除了可以是图片外 还可以是canvas和video视频 context.fillStyle=pattern; context.fillRect(0,0,800,800) };*/ var backCanvas=createBackgroundCanvas(); var pattern=context.createPattern(backCanvas,"repeat"); context.fillStyle=pattern; context.fillRect(0,0,800,800); function createBackgroundCanvas(){ var backCanvas=document.createElement("canvas"); backCanvas.width=100; backCanvas.height=100; var backCanvasContext=backCanvas.getContext("2d"); drawStar(backCanvasContext,50,50,50,0); return backCanvas; } function drawStar(cxt,x,y,R,rot){ cxt.save(); cxt.translate(x,y); cxt.rotate(rot/180*Math.PI); cxt.scale(R,R); starPath(cxt); cxt.fillStyle="#fb3"; cxt.fill(); } function starPath(cxt){ cxt.beginPath(); for(var i=0;i<5;i++){ cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), -Math.sin((18+i*72)/180*Math.PI)); cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5, -Math.sin((54+i*72)/180*Math.PI)*0.5); } cxt.closePath(); } </script> </html>