canvas中心旋转、中心缩放

lijinke666 发布于2019-08-20 16:37 / 3018人阅读

摘要：一中心旋转效果代码矩形中心点旋转前红色矩形旋转后绿色矩形二中心缩放效果代码矩形中心点缩放前红色矩形缩放后绿色矩形

一、中心旋转
效果：

代码：

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = "#ffffd";
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var x = 100,
    y = 100,
    width = 150,
    height = 150,
    angle = 90,
    rectCenterPoint = {x: x+width/2, y: y+height/2}; // 矩形中心点

// 旋转前(红色矩形)
ctx.fillStyle = "#f00";
ctx.fillRect(x, y, width, height);

// 旋转后(绿色矩形)
ctx.translate(rectCenterPoint.x, rectCenterPoint.y);
ctx.rotate(angle);
ctx.translate(-rectCenterPoint.x, -rectCenterPoint.y);
ctx.fillStyle = "#690";
ctx.fillRect(x, y, width, height);

二、中心缩放
效果：

代码：

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = "#ffffd";
document.body.appendChild(canvas);

var ctx = canvas.getContext("2d");
var x = 100,
    y = 100,
    width = 150,
    height = 150,
    rectCenterPoint = {x: x+width/2, y: y+height/2}, // 矩形中心点
    scaleX = 0.5,
    scaleY = 0.4;

// 缩放前(红色矩形)
ctx.fillStyle = "#f00";
ctx.fillRect(x, y, width, height);

// 缩放后(绿色矩形)
ctx.translate(rectCenterPoint.x*(1-scaleX), rectCenterPoint.y*(1-scaleY));
ctx.scale(scaleX, scaleY);
ctx.fillStyle = "#690";
ctx.fillRect(x, y, width, height);

超融合服务器专线服务 js 图片按中心旋转 Canvas _canvas 2canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83043.html

canvas中的拖拽、缩放、旋转 (下) —— 代码实现

摘要：中的拖拽缩放旋转上数学知识准备。表示整个区域，表示中的元素。事实上，工作上的需求并没有要求旋转，只需要实现拖拽缩放即可。写在前面 showImg(https://segmentfault.com/img/bVbonep?w=283&h=306); 本文首发于公众号：符合预期的CoyPan demo体验地址及代码在这里：请用手机或浏览器模拟手机访问上一篇文章介绍了canvas中的拖拽...

pumpkin9 2019-08-23 15:13 评论0 收藏0
canvas离屏、旋转效果实践——旋转的雪花

摘要：另外这里循环中用到了的旋转效果，所以我们可以很轻易的画出条有角度的线。效果见文章开头的效果展示链接效果展示理论基础——常见的canvas优化——模糊问题、旋转效果用离屏canvas画基础部分 1、封装画线函数 function drawLine(ctx,x1,y1,x2,y2,color){ ctx.save(); ctx.beginPath(); ctx.stroke...

546669204 2019-08-05 11:16 评论0 收藏0
canvas离屏、旋转效果实践——旋转的雪花

摘要：另外这里循环中用到了的旋转效果，所以我们可以很轻易的画出条有角度的线。效果见文章开头的效果展示链接效果展示理论基础——常见的canvas优化——模糊问题、旋转效果用离屏canvas画基础部分 1、封装画线函数 function drawLine(ctx,x1,y1,x2,y2,color){ ctx.save(); ctx.beginPath(); ctx.stroke...

maochunguang 2019-08-20 16:31 评论0 收藏0
小程序图片剪裁

摘要：基于上面原因，我采用的是里面放置图片，监听上面的手势，通过样式控制图片的旋转缩放和移动，最后剪裁用隐藏的。一个微信小程序图片剪裁组件，可以通过手势控制旋转缩放移动，也可以点击旋转进行90度旋转，先看下效果（视屏不知道为啥用不了，上个压缩过度的GIF先）：showImg(https://segmentfault.com/img/bVbewtR?w=312&h=550); 图片剪裁毫无疑...

qylost 2019-08-23 10:30 评论0 收藏0
鸿蒙开源第三方组件——SwipeCaptcha_ohos3.0旋转验证组件

摘要：步骤设置控件监听事件，重新生成验证区域在文件中添加控件在文件中添加控件，用于显示旋转验证的动态效果。先实例化一个随机数对象，用于后续计算随机生成的旋转验证块角度值。前言基于安卓平台的滑动拼## 二级标题图验证组件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...

Amos 2021-11-23 09:51 评论0 收藏0