浅尝一口CanvasCanvas入门级教程

MMMMMMaxuan

2023-11-14 帮助14人

Canvas面向对象编程

绘制文本

填充文本

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');
    ctx.font = "50px serif";
    ctx.fillText("你好~~~", 100, 100);
</script>
</body>

实现效果：字体是实心的学新通

描边文本

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');
    ctx.font = "50px serif";
    ctx.strokeText("你好~~~", 100, 100);
</script>
</body>

实现效果：字体是空心的学新通

绘制一个矩形并平行移动

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 构造函数
    function Rectangle(x, y, w, h, color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }

    // 更新
    Rectangle.prototype.update=function () {
        // 图像位置右移
        this.x  ;
    }

    // 渲染
    Rectangle.prototype.render=function () {
        // 设置图形填充颜色
        ctx.fillStyle=this.color;
        // 设置图形边框颜色
        ctx.strokeStyle="red";
        // 渲染图形填充内容
        ctx.fillRect(this.x,this.y,this.w,this.h);
        // 渲染图形边框
        ctx.strokeRect(this.x,this.y,this.w,this.h);
    }

    // 实例化
    let rec=new Rectangle(0,100,200,200,"orange");

    // 动画过程
    setInterval(()=>{
        // 清除画布（清楚起点，清楚宽度高度为整个画布的高度宽度）
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // 更新
        rec.update();
        // 渲染
        rec.render();
    },100)

</script>
</body>

实现效果：绘制一个长宽分别为200，200的矩形在画布（0，100）的位置每0.1秒向右移动一个像素

绘制一个不规则图形

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 开始路径
    ctx.beginPath();
    // 移动到绘制点
    ctx.moveTo(100,100);
    // 描述行进路线
    ctx.lineTo(200,200);
    ctx.lineTo(300,150);
    ctx.lineTo(350,50);
    // 封闭路线
    ctx.closePath();
    // 绘制这个不规则的图形
    // 边框
    ctx.strokeStyle="red";
    ctx.stroke();
    // 填充颜色
    ctx.fillStyle="yellow";
    ctx.fill();
</script>
</body>

绘制圆弧

arc(200, 200, 100, 0, 2 * Math.PI, true)
输入参数分别为x轴位置，y轴位置，半径，圆弧开始位置，圆弧结束位置，true顺时针/false逆时针

<body>
<canvas id="testCanvas" width="400" height="400"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('testCanvas');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 开始路径
    ctx.beginPath();
    // 描述行进路线
    ctx.arc(200, 200, 100, 0, 2 * Math.PI, true);
    // 绘制这个不规则的图形
    // 边框
    ctx.strokeStyle = "red";
    ctx.stroke();
    ctx.fillStyle="yellow";
    ctx.fill();
</script>
</body>

跟随鼠标的动态产生消失的彩色小球

<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<canvas id="mouseFollow" width="1200" height="600"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('mouseFollow');
    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 保存所有圆的对象
    let ballArr=[];
    // 圆构造函数
    function Ball(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = getRandomColor();
        // 设置圆横向运动方向
        this.dx = parseInt(Math.random() * 10) - 5;
        // 设置圆纵向运动方向
        this.dy = parseInt(Math.random() * 10) - 5;
        ballArr.push(this);
    }

    Ball.prototype.update = function () {
        // 圆正在运动
        this.x =this.dx;
        this.y =this.dy;
        this.r-=0.5;
        // 当圆半径小于零，从数组中删除该圆
        if(this.r<=0) {
            this.remove();
        }
        // 当圆触碰到屏幕边界则反弹
        else {
            if (this.x < this.r || this.x > canvas.width - this.r) this.dx = -this.dx;
            if (this.y < this.r || this.y > canvas.height - this.r) this.dy = -this.dy;
        }
    }

    Ball.prototype.render = function () {
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,2*Math.PI,true);
        ctx.fillStyle=this.color;
        ctx.fill();
    }

    Ball.prototype.remove = function () {
        ballArr.splice(ballArr.indexOf(this),1);
    }

    //随机生成透明度高的颜色
    function getRandomColor() {
        let [red, green, blue] = [0, 0, 0];
        red = Math.random() * 156 100;
        green = Math.random() * 156 100;
        blue = Math.random() * 156 100;
        return `rgba(${red},${green},${blue},0.1)`
    }

    // 设置鼠标监听，鼠标移动后在鼠标所在的地方创建小球
    canvas.addEventListener('mousemove',function (e) {
        new Ball(e.offsetX, e.offsetY, 40);
    })

    setInterval(()=>{
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ballArr.forEach(item=>{
            item.update();
            item.render();
        })
    },20)

</script>
</body>

实现效果：鼠标移动后在鼠标所在的地方创建小球，小球会慢慢变小并且扩散消失学新通

动态粒子连线效果

<head>
    <style>
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
<canvas id="mouseFollow"></canvas>
<script>
    // 获取canvas画布
    let canvas = document.getElementById('mouseFollow');
    // 设置画布大小为网页可见区域宽高
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;

    // 获取画布2d的属性
    let ctx = canvas.getContext('2d');

    // 保存所有圆的对象
    let ballArr = [];

    // 圆构造函数
    function Ball(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = "rgba(82,79,79,0.1)";
        // 设置圆横向运动方向
        this.dx = parseInt(Math.random() * 6) - 3;
        // 设置圆纵向运动方向
        this.dy = parseInt(Math.random() * 6) - 3;
        this.index = ballArr.length - 1;
        ballArr.push(this);
    }

    Ball.prototype.update = function () {
        // 圆正在运动
        this.x  = this.dx;
        this.y  = this.dy;
        if (this.x < this.r || this.x > canvas.width - this.r) this.dx = -this.dx;
        if (this.y < this.r || this.y > canvas.height - this.r) this.dy = -this.dy;
    }

    Ball.prototype.render = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
        ctx.globalAlpha = 1;
        ctx.fillStyle = this.color;
        ctx.fill();
        // 小球之间小于某个距离需要连线
        for (let i = 0; i <= this.index; i  ) {
            if (Math.abs(ballArr[i].x - this.x) < 120 && Math.abs(ballArr[i].y - this.y) < 120) {
                ctx.strokeStyle = "#000";
                ctx.beginPath();
                // 设置连线的透明度根据小球之间的距离变换
                ctx.globalAlpha = 10 / Math.sqrt(Math.pow(ballArr[i].x - this.x, 2)   Math.pow(ballArr[i].y - this.y, 2))
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(ballArr[i].x, ballArr[i].y);
                ctx.closePath();
                ctx.stroke();
            }
        }
    }

    Ball.prototype.remove = function () {
        ballArr.splice(ballArr.indexOf(this), 1);
    }

    // 生成50个粒子
    for (let i = 0; i < 50; i  ) {
        new Ball(Math.random() * canvas.width, Math.random() * canvas.height, 2);
    }

    setInterval(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ballArr.forEach(item => {
            item.update();
            item.render();
        })
    }, 20)
</script>
</body>

实现效果：当粒子之间距离小于某个数值时，粒子之间会有一条连线，距离越近，线的颜色越深学新通

这篇好文章是转载于：学新通技术网

浅尝一口CanvasCanvas入门级教程

Canvas面向对象编程

绘制文本

填充文本

描边文本

绘制一个矩形并平行移动

绘制一个不规则图形

绘制圆弧

跟随鼠标的动态产生消失的彩色小球

动态粒子连线效果

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开