Canvas轨迹

最新推荐文章于 2024-06-12 19:26:52 发布

Evan_Gu

最新推荐文章于 2024-06-12 19:26:52 发布

阅读量4.8k

点赞数

分类专栏： Javascript 文章标签： canvas 动画

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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/

Evan_Gu

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Canvas轨迹

http://mapv.baidu.com/examples/#baidu-map-forceEdgeBundling.html主要用到的就2个关键技术点：ctx.globalAlpha = ‘0.85’; //设置主canvas的绘制透明度临时canvas备份主canvas的历史图像，再叠加到主canvas上。绘制过程：首先需要知道动画的起终点，然后绘制移动的圆，计算出中间的点的位置，定时
复制链接

扫一扫

专栏目录