<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> canvas{vertical-align:top;} </style> </head> <body> <!-- 直线 --> <canvas id="canvas" width="100" height="100" style="border:1px solid red;"></canvas> <!-- 三角形 --> <canvas id="canvas2" width="100" height="100" style="border:1px solid red;"></canvas> <!-- 一个画布绘制两个 三角形 --> <canvas id="canvas3" width="300" height="300" style="border:1px solid yellow;"></canvas> <!-- 绘制矩形 --> <canvas id="canvas4" width="300" height="300" style="border:1px solid green;"></canvas> <!-- 绘制圆 或圆弧 --> <canvas id="canvas5" width="300" height="300" style="border:1px solid blue;"></canvas> <!-- 坐标变换 --> <canvas id="canvas6" width="300" height="300" style="border:1px solid grey;"></canvas> <!-- 单个实验 缩放 与旋转 --> <canvas id="canvas7" width="500" height="500" style="border:1px solid cyan;"></canvas> <!-- drawImage方法 加背景图像 --> <canvas id="canvas8" width="500" height="500" style="border:1px solid red;background:black;"></canvas> <!-- 绘制文字 --> <canvas id="canvas9" width="500" height="500" style="border:1px solid blue;"></canvas> <script> var canvas=document.getElementById("canvas");//获取canvas标签 var cxt=canvas.getContext('2d');//创建canvas对象 接口 钥匙 // canvas是基于状态的绘制 // 绘制一条直线--------------------------------------------------- cxt.moveTo(0,0);//起点 cxt.lineTo(100,100);//终点 // 设置线条样式 cxt.strokeStyle="red";//设置线条颜色 cxt.lineWidth="5";//设置线条粗细 cxt.stroke();//连接(绘画)命令 stroke：轻抚 // 绘制三角形----------------------------------------------------- var canvas2=document.getElementById("canvas2"); var cxt2=canvas2.getContext('2d'); cxt2.moveTo(50,0); cxt2.lineTo(0,100); cxt2.lineTo(100,100); cxt2.lineTo(50,0); cxt2.strokeStyle="cyan"; cxt2.lineWidth=5; cxt2.fillStyle="orange"; cxt2.fill(); cxt2.stroke(); // 在一个画布 画两个三角形-------------------------------------- var canvas3=document.getElementById("canvas3"); var cxt3=canvas3.getContext('2d'); // 第一个三角形 cxt3.beginPath();//开始创建路径 cxt3.moveTo(150,0); cxt3.lineTo(150,80); cxt3.lineTo(250,80); // cxt3.lineTo(150,0); 可省略 cxt3.closePath();//关闭路径 cxt3.strokeStyle="yellow";//线条颜色 cxt3.lineWidth=2;//线条宽度 cxt3.fillStyle="green";//填充颜色 cxt3.stroke();//绘制命令 cxt3.fill();//填充命令 // 第二个三角形 cxt3.beginPath();//开始创建路径 cxt3.moveTo(100,100); cxt3.lineTo(80,180); cxt3.lineTo(200,200); // cxt3.lineTo(100,100); 可省略 cxt3.closePath();//关闭路径 cxt3.strokeStyle="yellow";//线条颜色 cxt3.lineWidth=2;//线条宽度 cxt3.fillStyle="cyan";//填充颜色 cxt3.stroke();//绘制命令 cxt3.fill();//填充命令 // 多边形 cxt3.beginPath();//开始创建路径 cxt3.moveTo(250,200); cxt3.lineTo(180,200); cxt3.lineTo(150,250); cxt3.lineTo(180,300); cxt3.lineTo(250,300); cxt3.lineTo(280,250); cxt3.lineTo(250,200); cxt3.closePath();//关闭路径 cxt3.strokeStyle="purple";//线条颜色 cxt3.lineWidth=2;//线条宽度 cxt3.fillStyle="orange";//填充颜色 cxt3.stroke();//绘制命令 cxt3.fill();//填充命令 // 绘制矩形-------------------------------------------------------- // cxt4.rect(x,y,width,height); var canvas4=document.getElementById('canvas4'); var cxt4=canvas4.getContext('2d'); // 第一种方法 cxt4.rect(20,20,150,100); cxt4.strokeStyle="black"; cxt4.lineWidth=5; cxt4.fillStyle="orangered"; cxt4.stroke(); cxt4.fill(); // 第二种方法 cxt4.strokeRect(20,150,80,50);//直接绘制 // 第三种方法 cxt4.fillStyle="pink"; cxt4.fillRect(120,150,80,50);//填充加绘制 默认填充黑色 // 清空画布上的一块儿区域 cxt4.clearRect(130,160,30,30); cxt4.clearRect(40,30,80,80); // 绘制圆 或圆弧---------------------------------------------- // cxt.arc(x,y,radius,starAngle,endAngle,anticlockwise); // x,y:圆心 // radius:半径 // starAngle,endAngle:开始角度，与终点角度; // anticlockwise：顺时针(false),逆时针(true);anticlockwise:逆时针的 var canvas5=document.getElementById('canvas5'); var cxt5=canvas5.getContext('2d'); cxt5.beginPath();//开始画路径 cxt5.arc(50,50,50,0,Math.PI*2,false); cxt5.closePath();//关闭路径 cxt5.fillStyle="red"; cxt5.fill(); cxt5.stroke(); // ------画弧------------------------- cxt5.beginPath(); cxt5.arc(150,50,50,-Math.PI*0.5,Math.PI*0.5,false); cxt5.closePath(); cxt5.fillStyle="pink"; cxt5.fill(); cxt5.stroke(); // 第二个弧 cxt5.beginPath(); cxt5.arc(50,150,50,Math.PI/4,-Math.PI*0.25,false); cxt5.closePath(); cxt5.fillStyle="orangered"; cxt5.fill(); cxt5.stroke(); // 第三个弧 cxt5.beginPath(); cxt5.arc(150,150,50,Math.PI/4,-Math.PI*0.25,true); cxt5.closePath(); cxt5.fillStyle="green"; cxt5.fill(); cxt5.stroke(); // 坐标变换 // cxt.translate(x,y)位移 // cxt.scale(x,y)缩放 不光图片宽高会缩放 起始坐标也会缩放 // cxt.rotate(angle)旋转 不光图形会旋转 坐标系也会旋转 // 解决使用多个位移后位置叠加的情况 // cxt.save();保存 // cxt.restore();恢复 var canvas6=document.getElementById('canvas6'); var cxt6=canvas6.getContext('2d'); cxt6.fillStyle="gray"; cxt6.save(); cxt6.translate(50,50);//位移 cxt6.fillRect(0,0,100,50); cxt6.restore(); cxt6.save(); cxt6.fillStyle="green"; cxt6.translate(50,50);//相对于第一个矩形位移叠加了 cxt6.scale(2,1); // 处理方法是用cxt.save();cxt.restore()将路径和位移包裹起来 // 旋转同样是这样处理 cxt6.fillRect(50,50,100,50); cxt6.restore(); cxt6.fillStyle="red"; cxt6.save(); cxt6.translate(200,175);//让图片在（150,150）坐标 // cxt6.translate(50,50); cxt6.rotate(30*Math.PI/180); cxt6.fillRect(-50,-25,100,50);//让图片中心点与原点重合 cxt6.restore(); // ------------------实验 旋转 与 缩放---------------------- // 使canvas的旋转与缩放 以图片中心为基准 使效果与css3效果相同 var canvas7=document.getElementById('canvas7'); var cxt7=canvas7.getContext('2d'); var deg=0; // cxt7.fillStyle='red'; // cxt7.save(); // cxt7.translate(200,150);//用位移确定 图片在画布中的位置 // // cxt7.rotate(180*Math.PI/180); // // cxt7.scale(2,1);//此时用缩放也和css3一样了 // cxt7.fillRect(-100,-50,200,100);//先让图片的中心与原点重合1 // cxt7.restore(); function xz(){ // cxt7.clearRect(0,0,500,500); deg=deg+2; cxt7.clearRect(0,0,500,500) cxt7.beginPath(); cxt7.save(); cxt7.translate(200,150); cxt7.rotate(deg*Math.PI/180); console.log(deg); cxt7.strokeRect(-100,-50,200,100); cxt7.restore(); cxt7.closePath(); if(deg>=360){ deg=0; cxt7.clearRect(0,0,500,500) } } setInterval(xz,40); // drawImage方法 加背景图像----------------------------- // drawImage(image,x,y) // drawImage(image,x,y,w,h) // 参数说明 // image：img,video元素，或者javascript中的image对象，用来装载图片文件 // x,y:绘制图像时，在画布中的起始x,y坐标 // w,h:绘制时，设置图像的宽度和高度 // 使用方法： // var img = new Image();//创建Image对象 // img.src="img/html.jpg";//设置图像路径 // img.onload=function(){//图像加载完之后，将图片放在canvas里面 // context.drawImage(img,10,10); // } // clip()图像裁切方法 // 使用路径在画布上设置裁切区域 // 调用clip()方法设置裁切区域 // 例子 var canvas8=document.getElementById('canvas8'); var cxt8=canvas8.getContext('2d'); var img=new Image();//创建Image对象 img.src="img/Hydrangeas.jpg";//设置图像路径 img.onload=function(){ cxt8.drawImage(img,0,0,500,500) } // cxt8.save();加了这对标签 就切不了图了 无解 cxt8.strokeStyle="cyan"; cxt8.lineWidth="7"; cxt8.arc(250,250,200,0,2*Math.PI,false); cxt8.stroke(); cxt8.clip(); // cxt8.restore(); // -----------绘制文字---------------------------- // font:设置文本样式 // textAlign:水平对齐方式 left,right,center // textBaseline:垂直对齐方式 top,middle,bottom // 填充文字 fillText(text,x,y) // 绘制文字轮廓 strokeText(text,x,y) // 参数说明： // text:要绘制的文字 // x,y:文字起点x,y坐标 // 例子 var canvas9=document.getElementById('canvas9'); var cxt9=canvas9.getContext('2d'); cxt9.font="50px 微润雅黑"; cxt9.fillStyle="pink"; cxt9.strokeStyle="blue"; cxt9.textBaseline="top";//默认是底部对齐 cxt9.textAlign="left";//默认水平对齐方式为左对齐 cxt9.fillText('你好，欢迎光临!',100,100); cxt9.strokeText('哈哈哈哈',200,200); cxt9.strokeText('你好，欢迎光临!',105,105); </script> </body> </html>