canvas中的图片可以平面旋转吗，请给出代码

可以，下面是实现平面旋转的代码```javascript // 获取canvas元素和其上下文对象 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 加载图片 var img = new Image(); img.src = 'image.jpg'; // 图片加载完成后执行函数 img.onload = function(){ // 旋转的度数（正值表示逆时针） var angleInDegrees=90; // 计算图片中心的位置 x:图片中心相对于画布左上角x坐标 y:图片中心相对于画布左上角y坐标 width:图片宽度 height:图片高度 degree:旋转度数 pivotX,pivotY:旋转中心位置坐标(0,0)为画布左上角 */ var x=(canvas.width-img.width)/2; var y=(canvas.height-img.height)/2; var width=img.width; var height=img.height; var degree=angleInDegrees*Math.PI/180; var pivotX=x+width/2; var pivotY=y+height/2 ; // 旋转前保存当前画布的内容 ctx . save (); // 旋转操作 translate(x,y):平移操作 rotate(degree):旋转操作 scale(sx,sy): 缩放操作 transform(a,b,c,d,e,f):变形操作 setTransform(a,b,c,d,e,f):重新映射画布上的 (0 , 0)位置 ctx . translate ( pivotX , pivotY ); ctx . rotate ( degree ); ctx . translate ( -pivotX , -pivotY ); // 画出旋色之后的图像 ctx . drawImage ( img , x , y , width , height); // 恢复原有内容 restore():返回之前保存过得内容 ctx . restore (); } ```