Canvas绘图
Canvas的基本API
制作矩形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> <!--如果浏览器不支持会显示下面文字--> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //获取canvas标签 var cas = document.querySelector("canvas"); //获取绘制环境 var ctx = cas.getContext("2d"); //填充颜色,如同更换画笔一般 ctx.fillStyle = '#ff0'; //绘制矩形 ctx.fillRect(100,100,150,100); console.log(cas); </script> </body> </html> |
使用路径绘制图形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> <!--如果浏览器不支持会显示下面文字--> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //获取canvas标签 var cas = document.querySelector("canvas"); //获取绘制环境 var ctx = cas.getContext("2d"); //路径开始 ctx.beginPath(); //路径规划 ctx.moveTo(100,100); //移动画笔,没有路径线 ctx.lineTo(200,100); //在画布上移动画笔,如同画画 ctx.lineTo(100,200); ctx.lineTo(150,0); ctx.lineTo(200,200); ctx.lineTo(100,100); //路径结束 ctx.closePath(); //填充路径 ctx.fillStyle = 'red'; ctx.fill(); </script> </body> </html> |
效果图:
制作圆形、扇形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> <!--如果浏览器不支持会显示下面文字--> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //获取canvas标签 var cas = document.querySelector("canvas"); //获取绘制环境 var ctx = cas.getContext("2d"); //路径开始 ctx.beginPath(); //路径移动到圆心 ctx.moveTo(100,100); //画一个整圆 //ctx.arc(100,100,50,0,360); //根据传递的参数画图 ctx.arc(100,100,50,0,getHuDu(120)); //路径结束 ctx.closePath(); //填充路径 ctx.fillStyle = 'red'; ctx.fill(); //获取弧度 function getHuDu(hd){ return hd*Math.PI/180; } </script> </body> </html> |
效果图:
制作文字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> <!--如果浏览器不支持会显示下面文字--> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //获取canvas标签 var cas = document.querySelector("canvas"); //获取绘制环境 var ctx = cas.getContext("2d"); //绘制文字 ctx.font = '20px 宋体'; ctx.align = 'center'; ctx.fillText('午_夜博客',200,150); </script> </body> </html> |
效果图:
绘制图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas width="500" height="300" style="border: 1px solid blueviolet;"> <!--如果浏览器不支持会显示下面文字--> 浏览器不支持Canvas </canvas> <script type="text/javascript"> //获取canvas标签 var cas = document.querySelector("canvas"); //获取绘制环境 var ctx = cas.getContext("2d"); //获取图片 var img = new Image(); img.src = 'img/te.png'; img.onload = function(){ //绘制图片 ctx.drawImage(img,0,0,500,300); } </script> </body> </html> |
效果图: