最近老跟canvas打交道，处理图片：放大缩小，图片旋转，移动图片等等！
重新温故下canvas的基础用法！
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); //绘制矩形并填充 //前两个参数是正方形原点（左上角）的（x,y）坐标值， //其余的两个参数是矩形的宽和高，宽是矩形向右绘制的距离，高是矩形向下绘制的距离 //context.fillRect(x, y, width, height); context.fillStyle = "rgb(255,0,0)"; //rgb(红，绿，蓝); 设置填充颜色 context.fillRect(200, 300, 200, 100); //绘制矩形相框 context.lineWidth = 5; //加粗绘制线条 默认值为1 context.strokeStyle = "blue"; //设置线条颜色 context.strokeRect(40, 40, 200, 100); //绘制线条 context.beginPath(); //开始路径 context.moveTo(40, 40);//设置路径原点 context.lineTo(340, 340);//设置路径终点 context.closePath(); //结束路径 context.strokeStyle = "#00ff00"; context.stroke(); //绘出路径轮廓 //绘制圆形 context.beginPath(); //开始路径 //前两个参数是圆点的坐标值；第三个是半径；第四个是开始角度；第五个是结束角度； //第六个是一个布尔值，为true时：按逆时值方向绘制；为false时：按顺时针方向绘制。 //Canvas中的角度是以弧度为单位的，而非角度。 //context.arc(x, y, radius, startAngle, endAngle, anticlockwise); context.arc(230, 90, 50, 0, Math.PI * 2, false); //绘制一个圆形 context.closePath(); //结束路径 context.fill(); //填充路径 //角度转换弧度 var degree = 1; //1度 var radians = degree * (Math.PI / 180); //0.0175弧度 //绘制文本 var txt = "Hello World!"; context.font = "italic 30px serif"; //修改字号和字体 默认值：10px sans-serif 该值可接收与css的font完全相同的字符串 //第一个参数：准备绘制的文本，第二三个参数：文本原点（左下角）的（x,y）针坐标 context.fillText(txt, 20, 90); context.lineWidth = 1; context.font = "italic 60px serif"; context.strokeText(txt, 20, 190); //创建描边文本 //擦除Canvas setTimeout(function () { context.clearRect(0, 0, 500, 500); }, 10000); //如果重新设置Canvas的宽和高，Canvas会恢复到初始状态。也就等于擦除了Canvas } </script> </head> <body> <canvas id="myCanvas" width="500" height="500"> </canvas> </body> </html>
交流群：225443677