一、缩放
<!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>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> </body> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle="rgb(0,255,255)" ctx.strokeRect(5, 5, 25, 25); //缩放图形，宽度2倍，长度2倍 ctx.scale(2, 2); ctx.strokeStyle="rgb(206,70,28)" ctx.strokeRect(5, 5, 25, 25) </script> </html>
红同矩形长宽各放大了两倍
二、旋转
<!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>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> </body> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle="rgb(0,255,255)" ctx.strokeRect(50, 20, 100, 50) //按照弧度旋转45度，Math.PI/180表示一度(弧度转度) ctx.rotate(45*Math.PI/180); ctx.strokeStyle="rgb(206,70,28)" ctx.strokeRect(50, 20, 100, 50) </script> </html>
三、位移
<!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>canvas</title> </head> <body> <canvas id="myCanvas" width="210" height="200"></canvas> </body> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle="rgb(0,255,255)" ctx.strokeRect(50, 20, 70, 50) //将绘制图形(0,0)坐标位移(70,70) ctx.translate(70,70); ctx.strokeStyle="rgb(206,70,28)" ctx.strokeRect(50, 20, 70, 50) </script> </html>
四、缩放、倾斜、位移
<!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>canvas</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> </body> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle="yellow" ctx.fillRect(0,0,250,100) //水平绘制参数倍数1，水平倾斜30度，垂直绘制1倍，垂直倾斜1弧度，水平移动，垂直移动 ctx.transform(1,30*Math.PI/180,-0.5,1,30,10); ctx.fillStyle="red" ctx.fillRect(0,0,250,100) ctx.transform(1,30*Math.PI/180,-0.5,1,30,10); ctx.fillStyle="blue" ctx.fillRect(0,0,250,100) ctx.transform(1,30*Math.PI/180,-0.5,1,30,10); ctx.fillStyle="pink" ctx.fillRect(0,0,250,100) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="300" height="400"> </canvas> </body> <script> function draw(id) { //获取元素 var canvas = document.getElementById(id); if (canvas == null) { return false; } //获取canvas上下文 var ctx = canvas.getContext('2d'); //设置径向渐变颜色 var g1 = ctx.createRadialGradient(400, 50, 50, 400, 50, 400); g1.addColorStop(0, 'rgb(255,255,0)'); g1.addColorStop(0.3, 'rgb(255,0,255)'); g1.addColorStop(1, 'rgb(0,255,255)'); ctx.fillStyle = g1; ctx.fillRect(0, 0, 500, 500); //重新设置中心点 ctx.translate(200, 50); ctx.fillStyle = "rgba(255,0,0,0.25)"; for (var i = 0; i < 50; i++) { ctx.translate(25, 25); //设置缩放0.95 ctx.scale(0.95, 0.95); //设置旋转18度 ctx.rotate(18 * Math.PI / 180); ctx.fillRect(0, 0, 100, 50); } } </script> </html>
