摘要:一中心旋转效果代码矩形中心点旋转前红色矩形旋转后绿色矩形二中心缩放效果代码矩形中心点缩放前红色矩形缩放后绿色矩形
一、中心旋转
效果:
代码:
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);
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83043.html
摘要:中的拖拽缩放旋转上数学知识准备。表示整个区域,表示中的元素。事实上,工作上的需求并没有要求旋转,只需要实现拖拽缩放即可。 写在前面 showImg(https://segmentfault.com/img/bVbonep?w=283&h=306); 本文首发于公众号:符合预期的CoyPan demo体验地址及代码在这里:请用手机或浏览器模拟手机访问 上一篇文章介绍了canvas中的拖拽...
摘要:另外这里循环中用到了的旋转效果,所以我们可以很轻易的画出条有角度的线。效果见文章开头的效果展示链接 效果展示理论基础——常见的canvas优化——模糊问题、旋转效果 用离屏canvas画基础部分 1、封装画线函数 function drawLine(ctx,x1,y1,x2,y2,color){ ctx.save(); ctx.beginPath(); ctx.stroke...
摘要:步骤设置控件监听事件,重新生成验证区域在文件中添加控件在文件中添加控件,用于显示旋转验证的动态效果。先实例化一个随机数对象,用于后续计算随机生成的旋转验证块角度值。 前言基于安卓平台的滑动拼## 二级标题图验证组件SwipeCaptcha(https://github.com/mcxtzhang/SwipeCa...
阅读 3522·2021-11-22 15:22
阅读 3314·2019-08-30 15:54
阅读 2701·2019-08-30 15:53
阅读 755·2019-08-29 11:22
阅读 3502·2019-08-29 11:14
阅读 2038·2019-08-26 13:46
阅读 2191·2019-08-26 13:24
阅读 2255·2019-08-26 12:22