canvas运动轨迹

最新推荐文章于 2023-12-11 10:30:26 发布

weixin_30737363

最新推荐文章于 2023-12-11 10:30:26 发布

阅读量638

点赞数 1

原文链接：http://www.cnblogs.com/shinesea/p/10522688.html

版权

参考文章：

https://blog.csdn.net/gdp12315_gu/article/details/53575556

https://github.com/chengquan223/map-canvas/tree/master/examples

canvas双缓存；

设置globalAlpha，临时canvas保存上一步主canvas数据，临时canvas数据复制到主canvas时，透明度会下降，相当于把主canvas上一步数据透明度调低。上一步（透明度调低）、下一步数据叠加在一起形成运动效果。

Path2D:


<body>
  <canvas id="canvas"></canvas>
  <div id="result"></div>
</body>

var div = document.getElementById("result");
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);
path1.closePath();
ctx.stroke(path1);

var path2 = new Path2D();
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
path2.closePath();
ctx.stroke(path2);

var path3 = new Path2D("M230 10 h 80 v 80 h -80 Z");
ctx.fill(path3);
path3.closePath();

$('canvas').click( function(event) 
{
  div.innerHTML = "";
  
  var x = event.pageX;
  var y = event.pageY;

  if (ctx.isPointInPath(path1, x, y))
    div.innerHTML = "Path1 clicked";

if (ctx.isPointInPath(path2, x, y))
    div.innerHTML = "Path2 clicked";
  
  if (ctx.isPointInPath(path3, x, y))
    div.innerHTML = "Path3 clicked";
});

转载于:https://www.cnblogs.com/shinesea/p/10522688.html