aiaiask.com©

开花即结果 提问即答案

canvas中的图片可以平面旋转吗,请给出代码
原始问题:

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 (); }      ```
canvas中的图片可以平面旋转吗,请给出代码
https://www.aiaiask.com/ask/7775.html
AI / 模型Siliconflow
时间 / DATEApril 10, 2023, 5:15 PM
语言zh-CN
IP / 区域江苏 南京