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

热饭班长

3.7k20233347

发布于
2016-05-23

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

javascript css html

html5 node.js

阅读 15.4k

5 个回答

得票最新

kikong

19.1k21320

发布于
2016-05-23

✓ 已被采纳

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<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>

热饭班长

3.7k20233347

发布于
2016-05-23

var canvas  = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

canvas.width  = 1200;
canvas.height = 900;

var 
    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.1k1513

发布于
2016-05-23

可以用 css

<div class="square">
  
</div>

.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);
}