canvas有哪些效果-猿码集

1. 前言

Canvas是HTML5中的一个非常重要的标签，它可以让我们在Web上绘制各种各样的图形，增加页面的动态性和交互性。除了基本的图形绘制，Canvas还包括了很多有趣的效果，本文将主要介绍Canvas的各种效果。

2. 2D图形效果

2.1 绘制直线

Canvas可以通过随机生成直线点来模拟线条蠕动的效果，下面是示例代码：


<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.strokeStyle = 'red';
    function drawLine() {
        var x1 = Math.random() * 600;
        var y1 = Math.random() * 400;
        var x2 = Math.random() * 600;
        var y2 = Math.random() * 400;
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.stroke();
    }
    setInterval(drawLine, 100);
</script>

上面代码实现了每隔100毫秒生成一条随机直线的效果，用到了Canvas的moveTo()和lineTo()方法。

2.2 绘制曲线

Canvas通过贝塞尔曲线（Bezier Curve）的方法可以绘制出流畅的曲线。示例代码：


<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.strokeStyle = 'red';
    function drawCurve() {
        var x1 = Math.random() * 600;
        var y1 = Math.random() * 400;
        var x2 = Math.random() * 600;
        var y2 = Math.random() * 400;
        context.beginPath();
        context.moveTo(x1, y1);
        context.bezierCurveTo(x1 + 50, y1 + 50, x2 - 50, y2 - 50, x2, y2);
        context.stroke();
    }
    setInterval(drawCurve, 100);
</script>

上面代码实现了每隔100毫秒生成一条随机曲线的效果，用到了Canvas的beginPath()、moveTo()和bezierCurveTo()方法。

2.3 绘制矩形

Canvas可以通过绘制矩形背景色的方法实现类似扫描仪扫描的效果。示例代码：


<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle = '#000';
    function scan() {
        context.fillRect(0, 0, canvas.width, canvas.height);
        var x = Math.random() * canvas.width;
        context.clearRect(x, 0, 1, canvas.height);
    }
    setInterval(scan, 100);
</script>

上面代码实现了每隔100毫秒实现类似扫描仪扫描的效果，用到了Canvas的fillRect()和clearRect()方法。

2.4 绘制圆形

Canvas可以通过循环生成圆形点的方法实现火焰燃烧的效果。示例代码：


<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    function drawFlame() {
        for (var i = 0; i < 50; i++) {
            var radius = Math.random() * 50;
            var x = centerX + Math.cos(i) * radius;
            var y = centerY + Math.sin(i) * radius;
            var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
            gradient.addColorStop(0, '#ff0000');
            gradient.addColorStop(1, '#feth32');
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI, false);
            context.fillStyle = gradient;
            context.fill();
        }
    }
    setInterval(drawFlame, 100);
</script>

上面代码实现了每隔100毫秒实现火焰燃烧的效果，用到了Canvas的createRadialGradient()和arc()方法。

2.5 绘制图片

Canvas可以通过加载Base64编码的图片实现图片旋转的效果。示例代码：


<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        context.drawImage(img, 0, 0);
        setInterval(rotate, 100);
    }
    img.src = "data:image/png;base64,iVB...";
    var degree = 0;
    function rotate() {
        degree += 10;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.save();
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate(degree * Math.PI / 180);
        context.drawImage(img, -img.width / 2, -img.height / 2);
        context.restore();
    }
</script>

上面代码实现了每隔100毫秒实现图片旋转的效果，用到了Canvas的drawImage()和save()、translate()、rotate()、restore()方法。

3. 3D图形效果

3.1 3D立体效果

Canvas可以通过不同阴影程度的方法模拟出立体效果。示例代码：


<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
    var angle = 0;
    function draw3D() {
        var x = 200 + Math.cos(angle * Math.PI / 180) * 100;
        var y = 200 + Math.sin(angle * Math.PI / 180) * 100;
        var gradient = context.createRadialGradient(x, y, 0, x, y, 50);
        for (var i = 0; i < colors.length; i++) {
            gradient.addColorStop(i / colors.length, colors[i]);
        }
        context.beginPath();
        context.arc(x, y, 50, 0, 2 * Math.PI, false);
        context.fillStyle = gradient;
        context.shadowBlur = 20;
        context.shadowColor = colors[Math.floor(Math.random() * colors.length)];
        context.fill();
        angle++;
    }
    setInterval(draw3D, 50);
</script>

上面代码实现了每隔50毫秒实现立体效果的效果，用到了Canvas的createRadialGradient()和arc()方法，以及阴影相关的属性。

3.2 球形效果

Canvas可以通过绘制球形透明度的方法实现绚丽的球体效果。示例代码：


<canvas id="canvas" width="600" height="400"></canvas>
<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 100;
    var particles = [];
    var particleCount = 200;
    function initParticles() {
        for (var i = 0; i < particleCount; i++) {
            particles.push({
                x: centerX + Math.cos(i) * radius,
                y: centerY + Math.sin(i) * radius,
                opacity: i / particleCount
            });
        }
    }
    function drawParticls() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(function(particle) {
            context.beginPath();
            context.arc(particle.x, particle.y, 3, 0, 2 * Math.PI, false);
            context.fillStyle = 'rgba(255,255,255,' + particle.opacity + ')';
            context.fill();
            particle.x += Math.random() * 2 - 1;
            particle.y += Math.random() * 2 - 1;
        });
    }
    initParticles();
    setInterval(drawParticls, 50);
</script>

上面代码实现了每隔50毫秒实现球形效果的效果，用到了Canvas的arc()方法以及透明度相关的属性。

4. 小结

本文介绍了Canvas的各种2D和3D图形效果，包括绘制直线、曲线、矩形、圆形、图片、3D立体效果和球形效果等。它们可以让我们在Web上绘制出各种各样的有趣图形，增加页面的动态性和交互性。

canvas有哪些效果