H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影

本文链接：https://blog.youkuaiyun.com/qq_32514043/article/details/78889637

本文介绍了canvas画板制作、块的直线运动、粒子运动、线性与径向渐变、文字渲染及阴影效果的实现。通过实例代码展示了如何在canvas上创建动态效果，为构建捕鱼达人小游戏打下基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇主要讲解了矩形柱状图，弧形和饼图的绘制，但是离我们的目标还是有点远，不要紧，我们基础api都还没有学习完，今天继续。

本节主要内容
- canvas画板制作
- 块的直线运动
- 粒子运动
- 线性渐变
- 径向渐变
- 文字渲染
- 阴影

canvas画板

canvas画板简单来说就是设置一块画布在上面自由画线，看看效果图
这里写图片描述

document.addEventListener('DOMContentLoaded',function(){
   
   
    var canvas = document.querySelector("#canvas");
    var context = canvas.getContext("2d");
    var oC = document.querySelector("#clear");
    canvas.onmousedown = function(e){
   
   
        context.beginPath();
        context.moveTo(e.pageX,e.pageY);
        document.onmousemove = function(e){
   
   
            context.lineTo(e.pageX,e.pageY);
            context.stroke();
        };
        document.onmouseup = function(){
   
   
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
    oC.onclick=function(){
   
   
        context.clearRect(0,0,canvas.width,canvas.height);
    };
},false);

这个代码还是比较简单的，这里有一点需要讲讲就是清除画板功能。

canvas.clearRect(x,y,w,h);
x,y：画布的位置
w,h：清除的宽高

其实这里有一个非常重要的知识点：整个canvas的动画其实都是依赖clearRect这个api来实现的，其实在上一篇文章中的动态柱状图中其实已经使用过该api。但是这里我还是想举一个简单的例子来看看是如何实现运动的。

块的直线运动

看看效果图：
这里写图片描述

看这图片我们分析下：
1、首先绘制一个方块
2、动态改变块的绘制位置
直接代码实现：

var oC = document.getElementById('c1');
    var gd = oC.getContext('2d');

    gd.beginPath();
    var k=1;
    function