相关文章推荐
酷酷的羊肉串  ·  在canvas中根据鼠标的位置,获取当前点的 ...·  1 月前    · 
粗眉毛的薯片  ·  像素操作 - Web API | MDN·  1 月前    · 
腼腆的小摩托  ·  Reboot · Bootstrap v4.6·  3 月前    · 
文质彬彬的红豆  ·  山东省粮食和物资储备局 业务频道 ...·  3 月前    · 
憨厚的沙滩裤  ·  PAT 基础实验8-1.2 直捣黄龙 ...·  5 月前    · 
鬼畜的钢笔  ·  叛逆者(2021年由朱一龙、童瑶主演的谍战电 ...·  1 年前    · 
贪玩的手套  ·  斗罗,女神都成我的云养女友!_(辣上心扉)小 ...·  1 年前    · 
Code  ›  javascript - 关于canvas的scale缩放中心的问题 -
context seg canvas
https://segmentfault.com/q/1010000005178850
个性的骆驼
2 年前
segmentfault segmentfault
注册登录
问答 博客 标签 活动
发现
✓ 使用“Bing”搜本站 使用“Google”搜本站 使用“百度”搜本站 站内搜索
注册登录
  1. 首页
  2. 问答
  3. javascript
  4. 问答详情

关于canvas的scale缩放中心的问题

头像
码码码畜
2.9k 36 402 654
发布于
2016-05-23

对小正方形进行2倍的放大,他的坐标也会被移动,怎样让它以本身的中心放大呢?向下面这样

javascript css html html5 node.js
阅读 14.2k
5 个回答
得票 最新
头像
kikong
19.1k 4 26 40
发布于
2016-05-23
✓ 已被采纳
<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<canvas id="mycanvas" width="400" height="400" style="border: 1px solid #0E2D5F"></canvas>
<script>
    var canvasDom=document.getElementById("mycanvas");
    var ctx=canvasDom.getContext("2d");
    var rectWidth=100;
    var rectHeight=100;
    function drawRect(centerX,centerY,scaleX,scaleY){
        ctx.clearRect(0,0,canvasDom.width,canvasDom.height);
        ctx.save();
        ctx.translate(centerX,centerY);
        ctx.scale(scaleX*2,scaleY*2);
        ctx.fillStyle="#0E2D5F";
        ctx.fillRect(-rectWidth/2,-rectWidth/2,rectWidth,rectHeight);
        ctx.restore();
        ctx.save();
        ctx.translate(centerX,centerY);
        ctx.scale(scaleX,scaleY);
        ctx.fillStyle="#ffffff";
        ctx.fillRect(-rectWidth/2,-rectWidth/2,rectWidth,rectHeight);
        ctx.restore();
    drawRect(canvasDom.width/2,canvasDom.height/2,1,1);
</script>
</body>
</html>
头像
码码码畜
2.9k 36 402 654
发布于
2016-05-23
var canvas  = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.width  = 1200;
canvas.height = 900;
    scale   = 1.3,
    _width  = 100,
    _height = 100,
    _left   = 200,
    _top    = 200
context.strokeRect(_left,_top,_width,_height);
context.translate((_left + _width/2) - (_width / 2) * scale, (_top + _height/2)  - (_height / 2) * scale);
context.scale(scale, scale);
context.strokeRect(0, 0, _width, _height);

效果是正常了,但是总觉得有点别扭,大神帮我看看行不行??

头像
wangfulin
6.1k 2 10 26
发布于
2016-05-23

可以用 css

<div class="square">
.square{
    width:100px;
      height:100px;
      border:1px solid green;
      margin:100px;
    -webkit-transition:all 1s ease;
      transition:all 1s ease;
    -webkit-transform-origin:center center;
      transform-origin:center center;
.square:hover{
    -webkit-transform:scale(1.3);
    transform:scale(1.3);
头像
外籍杰克
8.8k 6 40 60
发布于
2016-05-23

scale和rotate这样的方法都是针对坐标原点(默认左上角)进行操作的。所以在你的第一次scale两倍的时候,正方形整体向右下角放大了两倍。

 
推荐文章
酷酷的羊肉串  ·  在canvas中根据鼠标的位置,获取当前点的RGB值_取canvas某个点颜色
1 月前
粗眉毛的薯片  ·  像素操作 - Web API | MDN
1 月前
腼腆的小摩托  ·  Reboot · Bootstrap v4.6
3 月前
文质彬彬的红豆  ·  山东省粮食和物资储备局 业务频道 省局开展文明家庭创建活动
3 月前
憨厚的沙滩裤  ·  PAT 基础实验8-1.2 直捣黄龙 (30分). 浙大版《数据结构学习与实验指导(第2版)》 - AcWing
5 月前
鬼畜的钢笔  ·  叛逆者(2021年由朱一龙、童瑶主演的谍战电视剧)_百度百科
1 年前
贪玩的手套  ·  斗罗,女神都成我的云养女友!_(辣上心扉)小说最新章节全文免费在线阅读下载-QQ阅读
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号