canvas----放大缩小,旋转

最新推荐文章于 2023-07-11 15:14:31 发布
最新推荐文章于 2023-07-11 15:14:31 发布
阅读量903 收藏
点赞数 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
      }
      #c1 {
        background: #ffffff;
        transition: translate 0.5s;
      }
    </style>
  </head>
  <body>
    <canvas id="c1" width="400" height="400"></canvas>
  </body>
  <script>
    var oC = document.getElementById("c1");
    var cvsCtx = oC.getContext("2d");
    var num = 0;
    cvsCtx.translate(100, 100);
    var num2 =0
    var value =1;

    setInterval(() => {
      cvsCtx.save();
      cvsCtx.clearRect(-100, -100, oC.width, oC.height);
      num++
      num2+=value;
     
        if(num2==100){
            value =-1
        }else if(num2==0){
            value=1
        }
      cvsCtx.rotate((num * Math.PI) / 180);
      cvsCtx.scale(num2*1/50,num2*1/50)
      cvsCtx.translate(-50, -50);
      cvsCtx.fillRect(0, 0, 100, 100);
      cvsCtx.restore();
    }, 50);
  </script>
</html>

 

weixin_41069726
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中使用canvas，在微信小程序中实现图片缩放移动涂鸦文字
yuansu_727的博客
02-19 993
uniapp中使用canvas，在微信小程序中实现图片缩放移动涂鸦文字
uniapp 微信公众号H5，超大图片压缩上传，经canvas缩放处理后丢失原图后缀名
码世界
06-10 715
需求描述： 某物业公司为提升管理水平，营造良好的物业形象与口碑，委托我们为其研发一套智慧社区管理平台， 首先要 为广大业主用户提供线上报修，线上投诉，自助缴费，单据查询，注册与认证等功能；因为让业主安装一个新的APP比较困难， 经商议决定开发微信公众号单页实现以上需求。 技术实现： 由于是基于微信公众号开发单页应用，研发团队决定使用uniapp作为前端开发框架， 后端采用 java springboot 框架， 成果展示： 问题描述： 由于在线报修和在线投诉功能涉及到业主拍照上传， 现在市场的手机
uni-app 利用canvas进行画框，移动框，放大缩小并删除，目前支持小程序,h5，其他没测试过
xiaoyou_xiaohe的博客
06-01 2075
目前没有在小程序上自主画框的，参考了网上资源，但是小程序跟原生的vue写法还是有差别，攻克了很多难题，这里分享给大家
uniapp-canvas拖拽组件-限制缩放倍数
bo_gu的博客
11-09 1313
组件中的缩放功能是计算出 手指按下的坐标到图像中心的距离A 和 手指移动到的坐标到图像中心的距离B，两者相除得到缩放倍数，然后将盒子的宽度调整为 原来的宽度x缩放倍数。需要注意的就是 缩放后的图片宽度是 获取到的图片宽度x实际缩放倍数，不能直接拿倍数来做比较 这里卡了我好久 组件相关代码修改如下。我们的需求是 在外部定义图片的宽度高度、缩放倍数的最大最小值。然后在组件中加上 根据缩放倍数 限制缩放的功能。实现图片的拖拽功能。今天更新一下 二开组件 实现控制图片缩放倍数的功能。
canvas实现图片根据滑块放大缩小效果
08-31
本文主要介绍了canvas实现图片根据滑块放大缩小效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
小程序中图片的移动、旋转和缩放功能
qq_41114603的博客
08-28 7287
先把代码放上来 js逻辑代码 ////图标移动开始事件 start(e) { //记录移动触摸起点位置 this.setData({ x: e.touches[0].clientX, y: e.touches[0].clientY, iconIndex: e.currentTarget.dataset.index }) }, ...
vue实现裁切图片同时实现放大、缩小、旋转功能
08-27
在实现图片的裁切、旋转和放大、缩小功能时，需要对canvas对象进行基本操作，例如获取canvas的上下文、绘制图片、设置图片的旋转角度等。 知识点6： FileReader 对象 在实现图片的裁切、旋转和放大、缩小功能时，...
js实现图片旋转 js滚动鼠标中间对图片放大缩小
10-19
在本文中，我们将探讨如何使用JavaScript...总结，实现JavaScript图片旋转和放大缩小功能，主要涉及Canvas的绘图操作、事件监听以及DOM操作。通过合理地组织代码和处理用户交互，可以创建出功能完善的图片查看组件。
canvas-quaternion-3d:基于四元数的3D引擎的javascript + HTML canvas端口
05-11
上下滚动以放大和缩小 按住Shift并单击并拖动以上下移动相机 球体对象 球体可以遵循路径-绕固定点或其他路径（上环）运行 线对象 ##未实现的功能最终可能会实现 相机不移动时的渲染优化-仅在具有移动路径的对象上...
uni-app APP端canvas使用总结
热门推荐
qq_37565670的博客
06-25 1万+
场景：开始接触uni-app端的canvas是因为有一个绘制流程图的需求 官网Api文档：canvas
uniapp下上传图片后图片裁剪加图片旋转，支持H5和app
最新发布
Study_Live_Sun的博客
07-11 3529
【代码】uniapp下上传图片后图片裁剪加图片旋转，支持H5和app。
uni-appH5端canvas压缩图片
weixin_44433499的博客
07-15 2753
实现原理 要想使用JS实现图片的压缩效果，核心API就是使用canvas的drawImage()方法。Canvas本质上就是一张位图，而drawImage()方法可以把一张大大的图片绘制在小小的Canvas画布上，不就等同于图片尺寸压缩了？对于本案例的压缩，使用的5个参数的API方法 context.drawImage(img, dx, dy); context.drawImage(img, dx, dy, dWidth, dHeight); context.drawImage(img, sx, sy, s
Map创建自定义图片图层，图片会随着地图缩放而缩放，uniapp、高德、腾讯、百度
qq_39891453的博客
09-06 7437
Map创建自定义图片图层，图片会随着地图缩放而缩放
canvas电子画板 涂鸦、橡皮擦、保存图片，图片放大缩小
lenn
04-22 1764
首先感谢作者https://ext.dcloud.net.cn/publisher?id=167918（675***@qq.com） uniapp插件市场涂鸦示例作者，若作者发现此博客有不妥行为，可联系我进行删除。再此基础上增加涂鸦时对图片大放大缩小、橡皮擦功能功能，保存涂鸦部分使用html2canvas，原作者使用arraybuffer转base64，根据自己方式进行选择。 【主要功能】画笔，图纸的放大缩小，开始画笔进行绘制，关闭画笔进行双指放大、缩小移动，保存绘制截图 整个demo放在百度云盘。 .
【uniapp】canvas实现图片拖拽功能
lumpsi的博客
09-09 4126
上面我们已经将当前被选中的对象移到了layers数组的尾部，因此在长按移动图片这一步骤中，我们就只需判断layers[layers.length - 1] 对象的isDrag属性是否为true，如果是则获取每次移动了的多少距离，并不断修改被选中图片的左上角坐标点。在前面我已介绍过，layers数组中下标越往后图层层级越高（因为canvas默认新绘制的图片会覆盖先绘制的图片），因此我们只需要反向遍历layers，优先判断图层层级较高的图片是否被选中即可。四个条件，就可以断定选中了图片。
基于UNI.app的小程序端的canvas绘图，绘制海报--图片更改为圆形，canvas对文字段落（长文本）进行处理
木子李的博客
06-11 3306
** 基于UNI.app的小程序端的canvas， 绘制海报–图片更改为圆形，对文字段落进行处理 ** canvas绘制，找准x轴y轴坐标 setFillStyle()设置文本字体颜色，上传下载要记得合法域名检测 保存海报至相册要保证首先获取相册授权，uni.app有介绍如何拉取授权这里就不详细说明（另一篇文章也有实例参考） 代码如下 <template> <button class="save-result" @click="saveToAlbum">
uni-app实现图片上传到canvas,并且图片可以移动
qq_42859627的博客
08-07 2897
uni-app实现图片上传到canvas,并且图片可以移动 废话不多说直接上代码 <template> <view class="container"> <!-- 海报 --> <image src="../../static/img/pokertest.png" mode=""></image> <canvas @touchstart="touchstart" @touchmove="touchmove" @touchen
html实现图片放大缩小旋转
05-29
要实现图片的放大缩小和旋转功能，可以使用HTML5的canvas和JavaScript来实现。以下是一个简单的示例代码： HTML部分： ```html <canvas id="myCanvas"></canvas> ``` JavaScript部分： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 创建一个图片对象 var img = new Image(); img.src = "image.jpg"; // 等待图片加载完成后再进行绘制 img.onload = function() { // 绘制图片 ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; // 定义变量用于存储图片的缩放比例和旋转角度 var scale = 1; var angle = 0; // 定义函数用于改变缩放比例和旋转角度 function zoomIn() { scale += 0.1; drawImage(); } function zoomOut() { scale -= 0.1; drawImage(); } function rotateLeft() { angle -= Math.PI / 6; drawImage(); } function rotateRight() { angle += Math.PI / 6; drawImage(); } // 定义函数用于绘制图片 function drawImage() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle); ctx.scale(scale, scale); ctx.drawImage(img, -img.width / 2, -img.height / 2); ctx.restore(); } // 绑定按钮的点击事件 document.getElementById("zoom-in").addEventListener("click", zoomIn); document.getElementById("zoom-out").addEventListener("click", zoomOut); document.getElementById("rotate-left").addEventListener("click", rotateLeft); document.getElementById("rotate-right").addEventListener("click", rotateRight); ``` 在上面的代码中，我们首先创建了一个canvas元素，并获取了它的上下文对象ctx。然后，我们创建了一个Image对象img，并设置它的src属性为要加载的图片的URL。我们在img的onload事件中绘制了图片。然后，我们定义了四个函数用于改变缩放比例和旋转角度，以及一个drawImage函数用于绘制图片。在drawImage函数中，我们使用了canvas的变换函数translate、rotate和scale来实现图片的缩放和旋转。 最后，我们绑定了四个按钮的点击事件，分别调用对应的函数来改变缩放比例和旋转角度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值