相关文章推荐
酷酷的羊肉串  ·  在canvas中根据鼠标的位置,获取当前点的 ...·  3 周前    · 
粗眉毛的薯片  ·  像素操作 - Web API | MDN·  3 周前    · 
正直的松球  ·  深度学习训练模型时,GPU显存不够怎么办?_ ...·  2 年前    · 
活泼的太阳  ·  停止Django后台任务删除complete ...·  2 年前    · 
体贴的打火机  ·  Python克里金插值包pykrige的基本 ...·  2 年前    · 
乐观的豌豆  ·  Spring Cloud Task ...·  2 年前    · 
威武的登山鞋  ·  【Android开发】解决permissio ...·  2 年前    · 
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某个点颜色
3 周前
粗眉毛的薯片  ·  像素操作 - Web API | MDN
3 周前
正直的松球  ·  深度学习训练模型时,GPU显存不够怎么办?_51CTO博客_gpu训练的模型能在cpu使用吗
2 年前
活泼的太阳  ·  停止Django后台任务删除completed_task模型 - 问答 - 腾讯云开发者社区-腾讯云
2 年前
体贴的打火机  ·  Python克里金插值包pykrige的基本使用 - DailyYu - 博客园
2 年前
乐观的豌豆  ·  Spring Cloud Task Reference Guide
2 年前
威武的登山鞋  ·  【Android开发】解决permission denied for window type 2038_Taozi825232603的博客-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号