Canvas轨迹

http://mapv.baidu.com/examples/#baidu-map-forceEdgeBundling.html

这里写图片描述

主要用到的就2个关键技术点:

  1. ctx.globalAlpha = ‘0.85’; //设置主canvas的绘制透明度
  2. 临时canvas备份主canvas的历史图像,再叠加到主canvas上。

绘制过程:

  1. 首先需要知道动画的起终点,然后绘制移动的圆,计算出中间的点的位置,定时绘制,每次绘制都移动一点位置,达到运动的效果,这是普通的运动的圆的效果。

  2. 绘制的时候设置当前canvas的透明度globalAlpha 为0.85
    需要给运动中的圆加上运动过程的轨迹效果,这里是用到一个临时的canvas来配合,每次需要绘制一个新圆之前都把之前的图像给绘制到临时的canvas中,然后等新圆画完后再把临时canvas的图像绘制回主canvas中,轨迹的效果。

  3. 这里关键的就是由于设置了globalAlpha,每次绘制一次备份的canvas图片都会把它的透明度设为0.85,达到了逐渐减小透明度的效果,直到为0,这样整体看上去效果就是运动的圆的后面跟的圆逐个透明度减小,知道为0,达到了运动轨迹的效果。

movecircle.js

var canvas = document.querySelector('#canvas'),
    ctx = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 400;

var backDom = document.createElement('canvas'),
    backCtx = backDom.getContext('2d');
backDom.width = canvas.width;
backDom.height = canvas.height;
document.body.appendChild(backDom); //测试使用

ctx.globalAlpha = 0.85; //关键

function draw(options) {
    backCtx.globalCompositeOperation = 'copy';
    backCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(options.x, options.y, options.r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = 'rgba(7,120,249,1)';
    ctx.fill();

    ctx.drawImage( backDom, 0, 0, backDom.width, backDom.height);
}

var start = {
    x: 25,
    y: 25,
    r: 10
};

var end = {
    x: 300,
    y: 300,
    r: 10
};

function render() {
    if (start.x < end.x && start.y < end.y) {
        draw(start);
        start.x += 5;
        start.y += 5;
        setTimeout(arguments.callee, 50);
    }
}

render();

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    html,body{
        padding:0;
        margin:0;
        background:#000;
    }
    #main{
        height:100%;
    }
    canvas {
        border:1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript" src="js/movecircle.js"> </script>
</body>
</html>

转自:http://nikai.us/weblog/canvas-movecircle/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值