Canvas轨迹

来源：互联网发布：加班工资计算软件编辑：程序博客网时间：2024/04/29 18:59

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

这里写图片描述

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

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

绘制过程：

首先需要知道动画的起终点，然后绘制移动的圆，计算出中间的点的位置，定时绘制，每次绘制都移动一点位置，达到运动的效果，这是普通的运动的圆的效果。
绘制的时候设置当前canvas的透明度globalAlpha 为0.85
需要给运动中的圆加上运动过程的轨迹效果，这里是用到一个临时的canvas来配合，每次需要绘制一个新圆之前都把之前的图像给绘制到临时的canvas中，然后等新圆画完后再把临时canvas的图像绘制回主canvas中，轨迹的效果。
这里关键的就是由于设置了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/

0 0